Using Blogger with
Professor Jody Myers
Hist/JS 496ih Israel’s History and Peoples
Before You Start
Download the Blogger template Zip folder from Professor Jody Myer’s site:
The name of the Zip folder is: template-green-student-blog
Expand the content of the folder:
Windows: right click and choose Extract All.
Mac: Double click the Zip folder.
Note: If you don’t have an application on your computer that expands Zip files, you can
download one for free at these sites:
Uploading the Template to Your Blog
Browse to: http://www.google.com/accounts/
1. Create a Google Account or sign in to your existing account.
2. Go to “My Account” and click the “Blogger’ Icon (If you don’t see the Blogger icon,
click “more” to see more Google products. Blogger is under the heading “Communicate,
show & share”).
3. Follow the instructions.
4. Create a Blog using any of the Blogger templates.
5. Go to the “Layout” section. (Figure 1)
Figure 1 Layout Page Elements View
Uploading the Template to Your Blog continued
6. Click “Edit HTML” (Figure 2).
Figure 2 Layout Edit HTML view
7. Click the “Browse” button and find the class template file on your computer.
8. Choose the template and click the “Open” button.
9. In Blogger, click “Upload”
10. You will see the message: “Widgets are about to be deleted”
11. Click on “Confirm & Save”.
Here are three key practices we want you to follow:
1. correctly adding a link within your posts;
2. adding the alt text to a picture;
3. having strong contrasts in color
Adding a Link to a Post
1. Log-in to your account and click on the Blogger icon.
2. In the Dashboard window (Figure 3)
a. Click “Edit Posts”
Figure 3 Blogger Dashboard
b. Choose the post you wish to edit and click on “Edit.” (Figure 4)
Figure 4 List of Posts
Adding a Link to a Post continued
3. Click the “Compose Tab”
Figure 5 Blogger Compose Editor Window
Adding a Link to a Post continued
4. Choose where you want to place the link. (Figure 6)
5. Type the text for the link and highlight it. (See Best Practice, page 6)
6. Click the “Link” button in the Post menu bar.
7. Type in the URL of the link.
8. Click “OK.”
9. Click “Publish Post” and test the link.
Figure 6 Adding a link
Click Link icon.
Type the URL
Type text and
Do not cut and paste the URL of the link. Instead, type text that describes the URL. Example:
New York Times instead of http://www.nytimes.com. Attach the link by doing Step 6 on page 6.
Editing ALT Tags
1. In the Compose editor, put the cursor where you want to place your image.
2. Upload the image to your post.
3. Click the “Edit HTML” tab in the post editing window.
4. Find the <alt= “ ”> tag and type in a description between the quotes. DO NOT DELETE
THE QUOTES! (Figure 7)
Figure 7 – Edit HTML Post Window in Blogger
The “ALT” tag contains a text description of an image and can be read by a screen reader to give
a person, who is vision impaired, the verbal equivalent of the image. It is a best practice to put
text descriptions in the ALT tags of all images.
You can see an “ALT” text description in Internet Explorer (IE) by placing your mouse over the
image. It might not appear in other browsers but, regardless, the screen reader will read the
Editing ALT Tags continued
5. Click the Compose tab to go back to WYSIWIG (What You See Is What You Get)
editing. (Figure 8)
Figure 8 – Compose Post Window of Blogger
Testing for Color Contrast
You can modify the color of a template in the layout tab “Fonts and Colors” section of Blogger.
Make sure that you test the color contrast after changing colors.
Download the Colour Contrast Analyser and install it on your computer.
1. Click on the Foreground eyedropper button. This brings up a magnifying window that
moves along with your cursor. Place the cursor over a letter in the text you are testing.
Left-click your mouse; this selects the color of the letter. (Figure 9)
2. Do the same thing for the Background behind the text.
Testing for Color Contrast continued
3. If the contrast between the text and the background is great enough, a green check will
appear in the right side of the Analyser window.
IMPORTANT: If a red X appears in the right side of the window, try a darker color for the
text and a lighter color for the background. Then re-test the combination.
Figure 9 Colour Contrast Analyser
10 | P a g e
Recap: Blogging Best Practices
The template that was given to you allows people with disabilities to use your blog. If you
modify the CSS and HTML of the template, you run the risk of making your blog unusable by
part of your audience.
Please keep in mind the following best practices.
Use high contrasting colors with text and background. Black on white is safest. (See
Testing for Color Contrast, page 8)
Do not use color referencing. Instead, refer to a section number or name in the blog.
Fill in the “alt” tag description for all images that you embed in a post.
Give an image a label that best represents the image.
Video must have Closed Captions or annotations.
Use descriptive text for to represent URLs.
Use descriptive titles for your posts.
When adding a list of items, use the bullet or number list from the toolbar in the
11 | P a g e