Skip to content
Home » Google » Apps » Draw » Have students create their own blog badge

Have students create their own blog badge

We want students to publish, having them create a blog is a great way to do this.  They may want to share their blog using their own blog badge.  As a teacher you can create a wall of these badges to display your links to the student blogs.

Step 1: Have the students design a badge in Google Draw
Go to and create->drawing

Name the drawing by clicking on “untitled drawing” in the upper left
It is very important that they make the drawing public, click on the blue share button in the upper right to set the sharing settings to public.

Grab the bottom right hand corner of the drawing to resize the canvas. It will zoom in to make the canvas look large, but really the image size is small.
Click Here to see my sample drawing.

Step 2:  Publish the drawing
Select file-> publish to the web

start publishing

Step 3: Get the image embed code (copy)

This image HTML code will create the badge on the students page but you will need to modify it slightly to have it hyperlink back to the students blog.

Here is the embed code for my sample drawing

Step 4: Create a hyperlink
I want to use HTML code text which creates a hyperlink.  The URL should be the link to the students blog.
In front of the embed code put the and at the end of the embed code put


Adding this around the embed code should create a hyperlink back to the students blog when the image is clicked on.

Note: this code needs to be placed in the HTML editing mode of the blog or webpage.

As a teacher create a web page that has a grid of these badges to show off the student webpages!

Another idea is to have them download that same image as a .jpg and create a favicon with their badge. (Favicons are those pictures on the tabs in your browser.) I find having different favicons for the student blogs makes it a lot easier for the students to navigate all of their tabs and for me when I am grading. Click Here for my blog post on creating favicon icons.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.