CSS, Widgets & Plugins

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