CSS, Widgets & Plugins
0 likes388 views
This document provides instructions for adding various widgets, plugins, and code to a blog. It explains how to add features like share buttons, forms, talking avatars, maps, chat boxes, flags, and images. For each item, it provides the steps to enable and configure the plugin or widget through the WordPress dashboard and customize the blog. It also includes information on using HTML, CSS, and JavaScript code to modify content appearance and functionality.
![Formidable
Step 3: Save and Embed Form
Embedding your form:
When you are done click create to save and
create your form. Don’t worry about the
settings page you come to next. You are
done! Unless you want to get really techie
and play with the settings, which is quite
quite fun.
1- Notice form id Number
2- On your post, switch to html view
and type in your form id code where you
want
your form to go. In this case, you would type:
[formidable id=8]](https://image.slidesharecdn.com/ccswidgetsplugins-131105003123-phpapp01/85/CSS-Widgets-Plugins-7-320.jpg)
CSS, Widgets & Plugins
- 1. Widgets, Plugins, CSS code and other silly & fun things for your blog George Ju Garcia http://www.coetail.com/jubonillagarcia/ twitter: @JuBonillaGarcia
- 2. Table of Contents Explaining Terms 3 Share & Like Button 4 Formidable 5-7 Voki 8- 11 Cluster Maps 12 Chat Box 13 Flag Counter 14 Text Widget 15 Compfight 16 Css Code 17
- 3. Plugins- Applications that extend functionality of blog. (behind the scenes) Widgets- Representation of plugins. Widgets are always plugins. Plugins aren’t all widgets HTML Code- Structures content CSS Code- Formats content
- 4. Share/Like Buttons Want this? Do this Path: Plugins Add this Social Share (Enable) *once activated you need to configure in Settings>Add This You can then choose to add to top of post or bottom
- 5. Formidable Step 1: Enable Formidable Creates forms and embeds them directly into your post or page Path: Appearance>Widgets Formidable (Enable) Will create Formidable tab on your dashboard Text
- 6. Formidable Step 2 : Create Form Drag to Here Notice it creates “Untitled”. Double click to rename and type in your question choose
- 7. Formidable Step 3: Save and Embed Form Embedding your form: When you are done click create to save and create your form. Don’t worry about the settings page you come to next. You are done! Unless you want to get really techie and play with the settings, which is quite quite fun. 1- Notice form id Number 2- On your post, switch to html view and type in your form id code where you want your form to go. In this case, you would type: [formidable id=8]
- 8. Voki Sign up for Voki at: www.voki.com & confirm your email address Select: Create a New Voki Want this?
- 9. Step 2- Create your Voki Voki Click here to select and customize your character Click here to add background to your character
- 10. Step 3- Add voice to your Voki Voki Click here to type what you want your Voki to say. Type your text in here. HINT: Sometimes you need to add periods and commas in between words just to slow your Voki down click play to hear your Voki talk Choose voice and accent
- 11. Step 4- Embed to your blog When you are happy with your Voki click here to get your Embed code Voki Copy this code onto the HTML side of your post or onto a text widget box (see text widget slide for instructions) if you want it to be displayed on your sidebar
- 12. Cluster Map Do this: Want this? 1. Go to Plugins (on your dashboard) 2. Enable widget pack (this will add ClusterMap widget to your widget options) 3. Go to Appearance> Widgets 4. Drag ClusterMap widget to the sidebar you want it on. 5. Fill out form Whatever you want-matters very little- 6. Go to your email and verify your email address. Your blog URL Your email address- where you will receive confirmation Check this box Hit Save
- 13. Chat Do this 1.Go to Plugins 2. Enable Wordpress Chat *once activated you can configure in Settings>Chat You can add chat to the bottom of your blog or in a specific post by clicking on the icon Want this?
- 14. Flag Counter Do this Want this? 1.Go to FlagCounter (http://flagcounter.com) Change colors if you want 2. Select your settings. Note that Edublogs probably only supports 2 columns Click here to get your html code 3. Copy the code onto a text widget (see text widget slide)
- 15. Text Widget Some widgets you find online (like Voki if you want it on your front page) need a text widget to work. 1. On your dashboard go to Appearance>Widgets 2. Drag the Text Widget to the sidebar you want it in 3. copy the HTML code into the body of the text widget 4. Add your title (whatever you want) 5. Save 6. Done HTML GOES HERE
- 16. Compfight Click Compfight is a search engine to find creative common pictures. You can search Compfight directly from your post Type in your search Image is embedded into your post with attribution
- 17. CSS Code On your dashboard click Appearance>Custom CSS Paste your codes here. You can add as you go. Your code will apply to all your pages. You can also add CSS coding directly into the HTML side of your post if you want it to apply only to that post.
- 18. Where to find CSS Code 1) W3Schools http://www.w3schools.com/css/css_examples.asp 2)CSS Beginner Tutorial http://www.htmldog.com/guides/css/beginner/