3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website

Welcome to our free professional development series on class and student blogging!

This series consists of a range of activities that take you through the process of class and student blogging.   While many of the class blog examples we’ve included are from primary grades, the same principles apply for class blogs regardless of student age (including adult learners).

The activities can be completed at your own pace and in any order!

The aim of this activity is to show you how to use a range of online tools to enhance posts and pages.

Click on a link below to go to the section you want to work on:

  1. Why educators enhance posts with interactive tools
  2. List of tools to get you started
  3. How to embed media in blog posts
  4. Embed code tips
  5. What now?

Back to Top

Why educators enhance posts with interactive tools

If you look closely at class blogs you’ll notice many of them add cool interactive tools to their blog post.

They do this because things like slides, videos, comic strips, quizzes, polls in blog posts grab attention, engage and create opportunities for interaction in ways not achievable using plain text and images.

There’s a gazillion online tools nowadays and most of them provide code that you can use to embed what you’ve found or created into your blog posts or pages.

Back to Top

List of tools to get you started

Brainstorming Tools

  1. AnswerGarden – is a word cloud site that collects words and phrases.   Great for brainstorming, collecting ideas, feedback etc.  Read about using AnswerGarden with students here.  Check out this AnswerGarden embedded in a blog post or here’s another.
  2. Bubbl.us – used to create color brainstorms and mind maps. Here’s a bubbl.us in a student post
  3. Padlet – an online notice board creator.  It’s a really fast and easy way to create engaging activities to use with students.  Previously called “Wallwisher” which you can learn more about here.

Curation tools

  1. Livebinders – create online binders.  Learn more about using Livebinder with students here and read how Livebinder can be used on iPads here.
  2. Scoop.it – easily curate engaging magazines.  Here’s a Scoop-it embedded in a blog post and here.
  3. Storify – curate your own stories from photos, video, tweets, what people post on social media sites and your own narration.  Here’s a Storify in a blog post and how you can use it with students.

Comic and Cartoon Tools

  1. Bitstrips – here’s a BitStrop embedded in a blog post.  Learn more about Bitstrips with students here.
  2. ToonDoo – here’s a ToonDoo embedded in a blog post.  Learn more about using ToonDoo with students here.

Poll and Survey tools

  1. Google Forms – here’s how to create a self grading Quiz using Google docs
  2. PollDaddy – Here’s a PollDaddy embedded in a blog post.
  3. PollEverywhere

Presentation Tools

  1. AuthorStream –  – A site where you can host your presentations and share with others. Check out this Authorstream embedded in a blog post here!
  2. Fotobabble – lets  you create a talking photo.  Excellent for speaking practising.  Here is an example of a Fotobabble or check out links in comments here.
  3. Glogster – lets you combine images, video, music, photos and audio to create interactive posters.   Here’s a Glogster’s embedded in a blog post.  Learn more about using Glogster with students here.
  4. Google Docs
  5. Prezi – is an online presentation and story telling tool that uses a single canvas instead of traditional series of slides.  The images, text, videos and other objects are placed on the canvas and users can zoom in and out.  Here’s a Prezi embedded in a blog post.
  6. SlideShare – A site where you can host your presentations and share with others.  Ideal for those who want to embed Presentations in their posts and websites rather than upload their PowerPoints directly and insert as a link.  It’s also an excellent site for locating Presentations created by others.  Check out a SlideShare embedded in a blog post here!
  7. Scribd – allows you to upload your MS Word documents, PDFs, PowerPoints and then share them within an embedded viewer on your blog.  Here’s an example of a Scribd embedded in a blog post – check out the Scribd as it contains cool tips for backing up your blog!’
  8. VoiceThreads – Creates an interactive slideshow using images or videos.  Allows others to leave comments on each photo by adding text, audio or video.  You can check out the VoiceThread in our post for advanced bloggers.
  9. Voki – allows you to create talking avatars.  Excellent for speaking practise and engaging students.  Here’s a Voki embedded in a blog post.

Slide Show Tools

  1. BookR – Super easy slide show maker.
  2. Flickr – Flickr is a PhotoSharing website for hosting and sharing your photos online.   SlideShows of photo sets or tags can be embedded into blog posts.
  3. PhotoPeach – lets you quickly upload photos to make great looking slideshows and even simple quizzes. Here’s a PhotoPeach embedded in a blog post and here’s instructions for creating PhotoPeach quizzes.

Quiz Creation tools

  1. QuizRevolution – allows you to quickly create quizzes with images and/or videos.  Here’s a QuizRevolution embedded in a blog post.
  2. PhotoPeach – lets you quickly upload photos to make great looking slideshows and even simple quizzes. Here’s a PhotoPeach embedded in a blog post and here’s instructions for creating PhotoPeach quizzes.

Video Creation Tools

  1. Animoto – great site for quickly creating professional looking videos from your images.  Here’s an Animoto embedded in a blog post. Learn more about using Animoto with students here.
  2. xtranormal – lets you create 3D animated videos. Here’s an xtranormal embedded in a blog post.

Video Hosting Websites

Here’s some of the popular site used by educators who want to embed their videos within embedded players rather than uploading them directly to posts as links.

  1. MediaCore (and the MediaCore plugin on Edublogs)
  2. Blip TV
  3. Vimeo
  4. YouTube

Back to Top
How to embed in blog posts

Adding embed code to posts or pages is as simple as:

1.   Completely write your post including adding title, text, images, tags and categories.

2.  Click on Save Draft.

3.  Click on Preview to previewed your post.

4.  Check your post and make all necessary edits.

5.  Locate the embed code for the media you created or want to embed.

  • Websites use a range of different icons to represent Embed code.
  • Look for icons like </>, the word Embed or hover your mouse over icons until you see the word Embed.
Below are examples of what you need do look for.

6.  Copy the embed code.

Below is an example of copying the embed code from a Voicethread.

7.  Click on HTML Tab on your blog post.

8.  Paste the embed code into your post where you want it to appear then click Publish.

9. Don’t click back to Visual Tab and close your post in HTML view.

  • Changing back to your Visual editing mode once you have added the embed code can remove or break the embed code.

10.  You should now see your embedded media when you view your post on your blog!

11.  Change back to Visual Editing mode when you write your next post by clicking on the Visual Tab.

Back to Top

Embed code in blog posts

1. Use HTML editing mode

Never to click on the Visual Tab to change back to the visual editing mode once you have added the embed code.

This can break the embed code with some types of embeds.   If this happens it can cause your blog sidebar to be pushed to the bottom of your theme.

If you need to edit a  post that contains embed code make sure you change to HTML editing mode before opening up the post to edit.

The easiest way to do this is to:

  1. Go to Posts > Add New and click on the HTML tab.
  2. Close the post while still in the HTML tab and then go to Posts > All Posts to open the post for editing.

Back to Top
2.  Changing embed size

Some embed code is designed to be embedded into normal websites and can be too wide for the width of blog post.

Ideal width for embedding for most blog themes is 450 pixels wide.

If the online tool doesn’t provide the ability to adjust the embed size you can often do this by editing the code yourself.   All you need to do is try adjusting the scale, width and/or height after you’ve added it to your post.

Back to Top

What now?

How did you go?

What have you learnt about embedding media? Leave a comment below with a link to your blog and let us all take a look!

Also feel free to leave any questions you are having (or tips/advice) as well.

Or go to Activity 9: Connecting with other classes!


Your email address will not be published. Required fields are marked *

  1. Hi there, I see someone has added some inappropriate words to the Answer Garden at the top of the page. I would like to recommend Edublogs Teacher Challenges on my blog as I found it a great blog improvement exercise last March. Any chance the Answer Garden could be edited in keeping with Edublogs usually exemplary standards.
    With every good wish
    Merry Beau

    • Hi Merry – that’s unfortunate, students I’d suspect.

      I just removed the answer garden for now as I wasn’t able to just remove some words.

      We definitely appreciate you letting us know!

  2. Pingback: Task 1 | English Teaching Via Blog

  3. Pingback: Blogging Works! (A How To Guide for Teachers and Students) | Viral Discourse

  4. Pingback: Value of a class camera | Tasmanian Blogs

  5. Dear edublogs,

    First of all, thank you for providing us with such a great service!

    I have a very simple question: Why can’t I embed HTML code in the comments text? Other than the pre-specified ‘bold’ and ‘italics’ formats, the HTML codes don’t work.

    For example,
    —Say I want to change the text or background color of a comment, I would use:
    Green text
    —To make the text color green. However the comment just sort of ignores the command – it obviously recognizes the HTML command as this is not included in the comment after updating, but it doesn’t change the text color. What to do?

    I would be very happy if you/anyone could tell me whether or not there is a way to circumvent this and change the text/background color in comments???


  6. Pingback: Professional Resources - EduBlogs Teacher Challenge: Blogging Basics from A-Z

  7. Pingback: How to Share the Teacher Challenge posts | Edublogs Teacher Challenges

  8. Hi there
    Can I translate this describtion into danish, and use it on my blog? Maybe you can email med the HTML code?

    • Anja Emilie Madsen
  9. Pingback: Blogging: Where do I start????

  10. This post was very helpful. Thank you for including me. I didn’t know how to find an embed code before.

    • Julie ManionT