Teacher Tech blog with Alice Keeler

Paperless Is Not a Pedagogy

Alice Keeler

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 http://drive.com 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
<img src=”https://docs.google.com/drawings/d/13zz7vbHV0wqzjGA2fpIz6gTVjiE0r3cv6eOsUFsbvWg/pub?w=100&amp;h=100″>

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

Example:
<a href=”https://www.alicekeeler.com”><img src=”https://docs.google.com/drawings/d/13zz7vbHV0wqzjGA2fpIz6gTVjiE0r3cv6eOsUFsbvWg/pub?w=100&amp;h=100″></a> 

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.

© 2024 All Rights Reserved.

💥 FREE OTIS WORKSHOP

Join Alice Keeler, Thursday Mar 28th or register to gain access to the recording.
Create a free OTIS account.

Join Alice Keeler for this session for a way to create dynamic and interactive digital lessons. The Desmos platform is completely free and allows for any topic to be created or customized.

Exit this pop up by pressing escape or clicking anywhere off the pop up.