Tag Archives: text widget

Top widgets for the sidebar of your class or student blog

Modified on by
26

Note: This post is cross-posted from the Edublogs News blog. If you like what you read, please consider subscribing here.

Did you know that the fastest and easiest way to add new features to your blog is by embedding widgets into the sidebar of your blog?

To help you out, here is a list of the most popular and most useful widgets that can be added to your blog in no time.

Scroll down to the bottom of this post for more instructions on how to add widgets to your blog. Don’t forget, these widgets can also be embedded using the HTML tab in any page or post as well!

Visitor Statistics

  1. clustrClustrMaps - The most popular widget on Edublogs.  Displays a small map with “dots” for each of your visitors.
  2. Flag Counter – Lists the most common countries that your visitors are from and shows the flag from each country.
  3. Who’s Among Us – With an account, includes some nice stat collection tools.
  4. My Web Counter – Simple and free visitor counters with many custom looks and designs.

voki

Talking Avatars

  1. Voki - Add a speaking and highly customizable avatar to your blog.  Record you voice, create a character, and much more!
  2. Read The Words – Human avatars that will read text or recorded audio right in your blog.
  3. Site Pal – A paid widget that can make scarily realistic avatars using uploaded photos of you or students.

Miscellaneous

  1. Clock Link – 100′s of different and unique clocks of all types.
  2. AccuWeather – The most complete collection of weather widgets to show current conditions and forecasts.
  3. Box.net – Create a file dropbox or upload widget for students to submit files for your review.
  4. Feed Wind – Display the latest posts from another blog anywhere on the web.
  5. Sweet Search – Place a search box for a trusted and safe for students search engine.

googapps

Google Apps

*These widgets also will all work with Google Apps for Education users too!

  1. Google Calendar – Embed a list of upcoming events or a month view of a public Google calendar.
  2. Google Talk Chatback – Put a badge in your sidebar that lets users chat with you live when you are online. Your blog’s visitors don’t even need a gtalk account to chat with you.
  3. Google Maps – Embed a Google map – complete with directions, street views, and more.
  4. Google Gadgets – Choose from hundreds of different widgets, including games, trivia and more.

Multimedia

  1. schooltubeFlickr Slideshow and Badges - Easily add photos from your flickr account to your sidebar.
  2. Facebook Photo Gallery - Show off your public facebook photo galleries right on your blog.
  3. SchoolTube MVP - Share popular videos from SchoolTube.com with easy sidebar access.
  4. YouTube - Place in YouTube channels or top trending videos.
  5. Mixpod – Create a music play list and share it on your blog.
  6. RadioTuna – Pick a genre and play music for your visitors.

Languages

  1. wordofdayGoogle Translate – Instantly translate your blog into many different languages.
  2. Transparent.com Word of the Day – Audio and visual word of the day. Customizable in many of the world’s languages such as Spanish, French, German, Chinese and many more.
  3. Reverso Translation – Translorts, verb conjugators, and more in many different languages.

Reading

  1. Shelfari - Show off your favorite books for others to see.
  2. Education Atlas – Free thesaurus and dictionary widget with many features.
  3. SitePal Widgetbox – Mentioned above, but this widget will allow readers to type in or copy and paste words to be read out loud.

Science & Math

  1. convertScience Score – A science question of the day. Students can even enter to win prizes.
  2. Wolfram Alpha – Quite possibly the best resource on this list – Wolfram Alpha contains hundreds of customizable math and science widgets, including unit converters, weather tools, graphing calculators, problem solvers, and much more. This might be the only resource math and science students and teachers need for their blogs!

History

  1. Info Please – Nice looking “this day in history” widget that displays multiple events and updates every day.
  2. Timeline Index – 30 different timelines showcasing several different periods of history – including US presidents, world history outline, philosophers, and explorers.

Widget Sites & Collections

  1. widgetboxWidgetBox.com – The definite go-to place to find and build your own widgets. Edublogs uses several widgets from here on our main site!
  2. SpringWidgets.com – Another great source for widgets from many of your favorite sites on the web. User reviews and comments help you find the perfect widget for your blog.
  3. Widgipedia.com – Like the two sites above, wigipedia is a huge and growing collections of widgets of all types and sizes.

How To Embed

1. Choose the widget of your choice and copy the html code for it.

2.  Go to Appearance > Widgets in your blog dashboard

Appearance > Widgets menu item

3.  Click on the desired Sidebar to expand (so you can add the widgets)

4.  Add a text widget to the desired sidebar by dragging it from the Available Widgets into the Sidebar area on the right.

5.  The widget will automatically open — just add the HTML code for your widget, click Save and then Close.

Adding HTML embed code to voki

6.  You should now see the widget in your blog sidebar!

Related Links

Since there are thousands and thousands of widgets to use, we are certain to have overlooked a few of your favorites.

Leave a comment below with any that we missed so that we can add to the list!

Here’s My CHEATS Method For Adding Images to Blog Sidebars

Modified on by
42

I’m frequently asked how to add images to blog sidebars — so I thought it would help to share my quick and easy cheats method.

So what do you need to know to do this?

To start with you need to understand that you need to:

  1. Write HTML code which links to the location of your image
  2. Add your HTML code to a text widget in your sidebar

Now that I’ve said blah blah HTML code twice…you’re probably thinking that I’ve made it too hard already.

It’s not but I first need to explain what is HTML code and then show you it’s really easy when you know my trick 8-)

What is HTML?

HTML is short for “Hyper Text Markup Language” which is a language used to tell a browser how to organise the layout of a web page it has downloaded from the Internet.  It influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry about how to write HTML because the Visual Editor does it for you. If you click on the HTML tab it shows the HTML code in your text.

Here’s the Trick!

As I said you need to use HTML but that doesn’t mean you can’t cheat with writing the HTML code.

Instead use your Visual Editor to do the work for you!

Cheating is as simple as:

1.  Open up a draft post in your blog dashboard
2.  Click on Add an Image to upload your image to the post

  • Ideally resize your image before uploading to 170 pixels wide because this generally the best width for most blog sidebars

Add an image icon

3.  Insert the title for your image (this displays when a reader hovers their mouse over the image)

4.  Change the link URL — if you want to link your image to a website

Uploading the image and adding the required info

5.  Click on Insert into Post

6.  If you want to add any text below your image — just write it!

Adding text below your image

7.  Now click on the HTML tab and copy all the HTML code.

Code the HTML code from the HTML tab

8.  Go to Appearance > Widgets in your blog dashboard

9.  Click on the desired Sidebar to expand (so you can add the widgets)

Please note: In new blogs sidebars in your dashboard are empty and adding widgets automatically removes the default Edublogs widgets

Expand your sidebar area

10.  Add a text widget to the desired sidebar by dragging it from the Available Widgets on the left into the Sidebar area on the right.

Adding a text widget to your sidebar

11.  The widget will automatically open — add a title to your widget, paste the HTML code and click Save

  • If you want to insert lines for better text spacing you need to add the HTML code <br/ > (means insert line break)

12.  When you check your blog you should now see it nicely displayed in your sidebar!

Image in blog sidebar

Enjoy!

P.S. Don’t share this tip with Larry Ferlazzo as he pays me in chocolate for each image I add to his blog sidebar 8-)

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your Blog PostsSubscribing For Free!

Adding ClustrMaps to Your Blog Sidebar Using A Text Widget

Modified on by
45

Image of a ClustrmapsClustrMaps is a popular widget for class and student blogs because it reminds students that they are part of a global audience and demonstrates how connected we all are.

Students love seeing the red dots grow as their readers, from around the World, visit their blog.

Please Note:

On free Edublogs blogs you need to follow the instructions below for adding ClustrMaps to your sidebar using a text widget!

Creating Your ClustrMaps

  1. Go to ClustrMaps.
  2. Enter your blog URL (e.g. your blog URL should look similar like this http://theedublogger.com/) and email address then click on Make My Map.Image of signing up for ClustrMaps
  3. Copy the HTML code for Option A. Image of the embed code

Adding The ClustrMap To Your Blog Sidebar

  1. Go to Appearance > Widgets in your Dashboard Image of widgets menu
  2. Click on the desired Sidebar to expand (so you can add the widgets) NOTE: In new blogs sidebars in your dashboard are empty and adding widgets automatically removes the default Edublogs widgets Image of widget sidebars
  3. To add a text widget, drag it from the Available Widgets areas on the left into the Sidebar area on the right Image of adding a text widget
  4. Drop the widget when you see a dashed line appear – this indicates the widget is in place Image of adding text widget to sidebar
  5. The widget will automatically open — just add the HTML code from Clustrmaps, click Save and then Close.  If you have trouble with the text widget or it doesn’t open — try changing your theme just in case there is an issue with it.Image of adding clustrmaps code to text widget
  6. You should now see your ClustrMaps in your blog sidebar and the dots will start appearing after 24 hours.

Image of clustrmaps in sidebar

FINAL THOUGHTS

If you need to grab new HTML embed code for your ClustrMaps just log into your ClustrMaps Admin area using your blog URL and password (sent in the original signup email from ClustrMaps).

Remember if you are an Edublogs supporters or Edublogs campus users you use the ClustrMaps Widget to add it your blog sidebar.

If you are enjoying reading this blog, please consider Subscribing For Free!

Embedding A Flickr SlideShow In Your Blog Sidebar

Modified on by
23

Have you speculated if it is possible to embed a Flickr Slideshow in a sidebar rather than in a post? Well Betsy asked because she wants to add one to her Merit School of Music blog.

Your options

The size of most embed code can be adjusted by pasting it into a simple text editor like Notepad and changing its width and height.  Really handy to know when you need to make an object smaller to fit the size of your post or sidebar.

However for a Flickr SlideShow there is a simpler option!  FlickrSliDR or Flickr slideshow! These “third party’ website lets you use the flickr URL address of the user, photo set or group and tags or any user/group to customise a Flickr slideshow to the dimensions you desire.

Adding a Slideshow to your blog sidebar

Both FlickrSliDR and Flickr slideshow create exactly the same SlideShow; which of the two websites you use is your choice.  Width of blog sidebars is dependent on your blog theme; however in most cases 180 px wide x 180 px high will work fine.

Image of creating a slideshow

Once you have grabbed the embed code from FlickrSliDR or Flickr slideshow go into your blog dashboard and add it to your sidebar using a text widget (Click on Design > Widgets).

Image of adding to sidebar using a text widget

Examples of Sidebar Slideshows

Below is an example of the size of a Flickrslideshow you would add to a blog sidebar.  I’ve used the fdsflickrtoy tag from images4education.  If you want to learn more about adding images to your in-class and online activities raise student interest I recommend you join images4education (you will be able to catch up with the weekly tasks).

Created with flickr slideshow.

Check out Ms. Kreul’s class blog to see a cool tour of their class created using FlickRSLiDR widget embedded in their side bar.

FINAL THOUGHTS

To learn more about using Flickr check out:

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your Blog PostsSubscribing For Free!

Adding A Voki Speaking Avatar To Your Blog Sidebar

Modified on by
94

voki21Voki speaking avatars are cool and lots of fun to create.

They’re used to add a human element to their blogs or engage students.

But they can be a bit pesky to embed in a blog so this post explains how to add a voki to your blog sidebar.

Our next post explains how to add them to a Post or Page.

About Vokis

Voki enables you to create an avatar in your own voice using a talking character.

You can customize your Voki to look like you or take on the identity of different characters such as animals, monsters.

Here’s ideas for using Vokis in your classroom (courtesy Helen Otway – Classroom2.0):

  1. Students can create avatars that are similar in looks or personalities and record a message that tells about themselves.
  2. Students can exchange these avatars with e-pals either within their own setting or anywhere in the world.
  3. Students can generate questions to ask their avatar e-pals.
  4. ESL (English as a Second Language) students can use the speaking avatars to practice and listen to their speech. They may use the computerised voice first then record their own voice when they feel more comfortable. Writing, reading and pronunciation are all practised.
  5. Students can create an avatar that resembles a character from a story, add a setting and give it speech. The speech could be from the story or a creative point of view (POV) from the character on an event.

Adding Voki Avatar to Your Blog Sidebar

Voki’s as added to your blog sidebar using text widgets as follows:

1.  Go to Voki

2.  Set up a Voki account and then create your own Voki.

3.  Once you have published your Voki grab the HTML embed code as follows:

a) From drop down menu next to ‘Embed in’ select WordPress

Selecting the destination for a Voki

b) From drop down menu next to ‘Size’ select Small (200 x 267) — use custom dimension of Width 170 for narrow sidebars

Changing embed size of Voki

c) Click Get Code and copy all the HTML embed code

Tip: Fastest way is to use the ShortCut Keys Ctrl+A to select all text and Ctrl+C to copy the text

Copying the Voki HTML embed code

4.  Go to Appearance > Widgets in your blog dashboard

Appearance > Widgets menu item

5.  Click on the desired Sidebar to expand (so you can add the widgets)

6.  Add a text widget to the desired sidebar by dragging it from the Available Widgets into the Sidebar area on the right.

7.  The widget will automatically open — just add the HTML code for your Voki, click Save and then Close.

Adding HTML embed code to voki

8.  You should now see your Voki in your blog sidebar!

Tips for Using Voki

  1. Audio is better quality and easier to add when created using Audacity
  2. Voki terms and conditions state you must be over 13 years to use their service
  3. These instructions for embedding Vokis won’t work on WordPress.com blogs due to restrictions on the types of code allowed.

FINAL THOUGHT

We hope you enjoy creating your voki avatars and adding them to your blogs. Please let us know how you go!

Read our next post to learn how to embed a Voki avatar in a post or page.

If you are enjoying reading this blog, please consider Subscribing For Free!