Week 2 – The Wonderful World of Templates and Widgets

July 22, 2009 · Posted in Assignment 

Wonderful World of Templates!

Before we get into widgets, it is important that you have chosen the template that you like.  Sometimes changing the template of a blog page can, and most likely will delete the widgets you have chosen to add.  Last week we explored the options of what Blogger has to offer in the way of templates.    There are hundreds (if not thousands) of other options out there!   Why look for another template?  As you get more into your blog and blogging it is nice to know there are options out there to help you get the look you want and the functionality you need.   

Find a free template from one of the many sources online. Remember there is no need to pay for a template, as there are plenty of free ones out there!  Here are a few to start with:

When deciding on a template to download – keep in mind the number or columns it offers, if it is widget ready and how each post will look with date, comments, and author’s name.  As you use more templates you will develop your own list of template ”must-haves.”

Once you find a template you like; download following the directions on the site (these directions may vary slightly from site to site).  The template will be zipped, so you will need to use your computer’s zip program to unzip it and save it in different location on your computer.  You will need to locate this file in the next steps.

Next you need to install that template into your blog. 

Be careful to read directions carefully, as all widgets/gadgets that you have added will be deleted if you have you not taken the time to save them.  Note:  If you have widgets that you’ve already added using code (if you haven’t- don’t worry – we’ll learn more about that in the next part of the assignment) you can choose to copy those codes BEFORE you change your template by clicking on the “edit” button and selecting the code to be copied.  Paste the code into a wordpad document to access after the template has been changed. 

  1. On the blogger dashboard, click the Layout tab and choose “Edit HTML”
  2. Under Back-up/ Restore Template – Click Browse to upload the template you have saved to your computer.
  3. Navigate to the template file (make sure this is the unzipped version) and click on the xml file and click “Open.”
  4. Once the file is listed in the box, click “Upload”
  5. A warning message will appear on the next screen letting you know about any widgets/gadets that are about to be deleted.  If you agree to the changes click “Confirm and Save.”
  6. Your template has now been changed.  View your blog to see the changes.

install_template

If you don’t like the look of the new template, try another one out.  Be sure to decide on a template before you step into the world of widgets!

Wonderful World of Widgets!

Have you ever noticed google ads, rotating banners,  or icons with info on them that changes? Those are examples of widgets.  What exactly is a widget?  According to wikipedia, a  widget is short for a window gadet. A widget on your blog is a visual part of your page and will display all your links, text, images, and other information in the sidebar of your blog.  Blogger comes with pre-made widgets (blogger calls these items gadgets) such as the polls, archives, comments, followers, etc., but you can also add other third party widgets through embeddable code.

On this blog there are 2 sidebars to the right of the page.  They include information such as tags, links, clustrmap and Shelfari.  The last two listed come from other websites that you join and copy the code onto you own blog.  They add a personal touch and provide insight into who you are.

This week you will learn what a widget is and how to use them to spruce up your blog.).

To get started, you need to make sure your blog theme is widget ready.

  1. On the blog dashboard, click on the Layout tab – and make sure “Page Elements” is selected.
  2. Click on “Add a Gadget.”  Depending on the layout of your blog page you have opportunties to add gadgets to different areas of the page.
  3. A pop-up window appears with a listing of basic gadets.  Choose one of these gadgets to add to your blog by clicking on the “+” icon.
  4. Customize the gadget as needed in the next screen and then choose save.
  5. The gadget is now added to your blog. 
  6. You can repeat this process and search through the entire gallery of gadgets – including searching the Featured and most popular.   You can even search for gadgets based on key terms.
  7. Add at least 5 more gadgets from the different categories to your blog.

blogger_gadget

Third Party Widgets

You don’t have to rely on what blogger offers in the way of widgets.   Sometimes you can find widgets from other sites that you want to include in your blog. 

  1. Look for the embeddable code on that site and copy the code. 
  2. Click on ” Add a Gadget” on your blogger page.
  3. Under the Basics Tab -Choose HTML/JavaScript
  4. Give the widget a title if needed.
  5. Paste that code into the text box provided. 

Here are some sites to check out for third party widgets ideas:

Your assignment this week, on your blog:

  1. Find a template from a source other than blogger and practice downloading and installing it.
  2. Add at least 5 gadets/widgets from blogger.
  3. Add a third party widget to your blog.
  4. Answer the following questions on your blog as a new post:
    • What did you learn?
    • How will you use what you have learned?
    • How did you feel about this information?
    • What makes a template work for you? What do you look for in a template for your website!
    • What widgets did you add this week?
    • What purpose do you see for widgets on your website?
    • What questions do you still have about blog templates and widgets?
    • What would you like to see covered next week?

Tags: , , ,

Comments

4 Responses to “Week 2 – The Wonderful World of Templates and Widgets”

  1. Jennifer Hutchcroft on July 28th, 2009 12:09 pm

    I learned that once you pick a template, you better stick with it- unless you want to have to re-create your widgets. There were several templates that I liked, but I was keeping in mind that this is something that I would like to use with my students/parents, so wanted it to be appealing to them.

    I added a Lunar cycle widget so that the kiddos can be reminded/checking in on it regularly since that is something they (and I) forget often. I also added a frogger template for fun, and was trying to add a widget that had fun random facts, but having technical difficulty with this one:) For me, I think that I would like to change up the widgets to go with this that we are learning about/going on monthly. I had added an espn widget, but thought I would rather have that on a personal blog.

    It took me a bit to get things arranged on the page b/c of size- widget column vs. blog column. Sometimes they were overlapping strangely. I think I got it figured out now though. I think what I need the most is time to work on the blog, creating postings, etc. to get things organzied and ready before school starts, being that this is something that I would like to start using soon.

    I might have missed the answer to this question, so my applogies- how would we have students post to this blog if they don’t have accounts? Is this where we would use the mail to blogger feature? But that still requires them to have email accounts, and most of my students do not. Again, sorry if I’m repeating questions:)

  2. Jennifer Hutchcroft on July 28th, 2009 12:23 pm

    Having an issue- when viewing my blog and click on “About” nothing is happening. I have a profile picture set and short info about me, but this is not showing. When I’m in “design mode” then I can see it. Help please:)

  3. taylorjwk on July 28th, 2009 7:17 pm

    For week three:
    More real-life examples/suggestions of how a blog has been and can be used as part of classroom instruction and interaction with students, parents, teachers, the world.

  4. Robin Young on July 30th, 2009 6:06 am

    Jennifer,

    I looked at the blog and it seems that the page links go directly to the main page and are not coded to go to different pages. This might be a case when you need to dig into the HTML code to get things linked correctly. I am not sure how to trouble shoot this one without getting into the dashboard settings and looking around. Not much help, I am happy to help do this or you can talk to your campus ITS.

    taylorjwk,

    Hopefully we have met this request with our assignment for week 3. We really want you to take time to look at as many blogs as possible to help find your purpose in blogging. Let us know if you need more examples and we will get additional links posted.

    Robin

Leave a Reply