css, widgets & plugins
DESCRIPTION
Author Ju Garcia - Year 2 Teacher at LISTRANSCRIPT
George
Widgets, Plugins, CSS codeand other silly & fun things for your blog
Ju Garciahttp://www.coetail.com/jubonillagarcia/twitter: @JuBonillaGarcia
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
Table of Contents
Plugins- Applications that extend functionality of blog. (behindthe scenes)
Widgets- Representation of plugins. Widgets are always plugins.Plugins aren’t all widgets
HTML Code- Structures content
CSS Code- Formats content
Path: PluginsAdd this Social Share (Enable)
*once activated you need toconfigure in Settings>Add ThisYou can then choose to add to
top of post or bottom
Want this?
Share/Like Buttons
Do this
Formidable
Creates forms and embeds them directly into your postor page
Path: Appearance>WidgetsFormidable (Enable)
Will create Formidable tab onyour dashboard
Text
Step 1: Enable Formidable
Formidable
Step 2 : Create Formchoose
Drag to Here
Notice it creates “Untitled”. Double click to rename and type in your question
FormidableStep 3: Save and Embed Form
When you are done click create to save andcreate your form. Don’t worry about thesettings page you come to next. You are
done! Unless you want to get really techieand play with the settings, which is quite
quite fun.
Embedding your form:
1- Notice form id Number2- On your post, switch to html view
and type in your form id code where youwant
your form to go. In this case, you would type:[formidable id=8]
VokiWantthis?Sign up for Voki at: www.voki.com & confirm
your email address
Select: Create a NewVoki
VokiStep 2- Create yourVoki Click here to select and customize your character
Click here to add background to yourcharacter
VokiStep 3- Add voiceto your 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 wordsjust to slow your Voki down
Choose voice and accent
click play to hear your Voki talk
VokiStep 4- Embed to
your blog
When you are happy with your Vokiclick here to get your Embed code
Copy this code onto the HTML side ofyour post or onto a text widget box (seetext widget slide for instructions) if youwant it to be displayed on your sidebar
Cluster MapWant this?
1. Go to Plugins (on your dashboard)
2. Enable widget pack (this will addClusterMap widget to your widget options)
3. Go to Appearance> Widgets
4. Drag ClusterMap widget to the sidebar youwant it on.
5. Fill out form
6. Go to your email and verify your emailaddress.
Do this:
Whatever you want-matters very little-
Your blog URL
Your email address- where you will receiveconfirmation
Check this box
Hit Save
ChatWant this?
1.Go to Plugins2. Enable Wordpress Chat
*once activated you can configurein Settings>Chat
You can add chat to the bottomof your blog or in a specific post
by clicking on the icon
Do this
Flag CounterWant this?
1.Go to FlagCounter (http://flagcounter.com)2. Select your settings. Note that Edublogs
probably only supports 2 columns
Do this
Change colors if you want
Click here to get your html code
3. Copy the code onto a text
widget (see text widget slide)
TextWidget
Some widgets you find online (like Voki ifyou want it on your front page) need a
text widget to work.
1. On your dashboard go toAppearance>Widgets
2. Drag the Text Widget to the sidebaryou want it in
3. copy the HTML code into the body ofthe text widget
4. Add your title (whatever you want)5. Save
6. Done
HTML GOES HERE
CompfightCompfight is a search engine tofind creative common pictures.
You can search Compfight directly from your post
Click
Type in your search
Image is embedded into your post withattribution
CSS Code
On your dashboard clickAppearance>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 sideof your post if you want it to apply only to that
post.
1) W3Schools http://www.w3schools.com/css/css_examples.asp
2)CSS Beginner Tutorial http://www.htmldog.com/guides/css/beginner/
Where to find CSS Code