Wednesday, March 10, 2010

Blogger Sidebar Widget - Gadget Tutorial

The most common questions I get from clients have to do with adding widgets (blogger calls them gadgets) to the sidebar of their blog. I created a video tutorial of this a year and a half ago and it's had nearly 11,000 views on You Tube. I rambled on and on in that video and blogger had made several updates since then, so it's time for a newer tutorial. I thought I'd do a written tutorial with screen shots this time around. (I've wondered why people continue to view that video, but I realize it is because there are very few tutorials about the blogger sidebar basics out there!) Here you go~

How do I add a widget - gadget to my blogger sidebar?
Please note that I will use widget or gadget throughout this
tutorial, but they refer to the same thing!

First you need to go to your blogger dashboard and click on layout. The default is the page element view, but if you are not there click on Page Elements (A). Add a new widget click Add a Gadget (B).A new window will open that shows some of the available widget options. There are many useful ones here such as Followers, Search this Blog, Pictures, etc, but the most common is HTML/JavaScript (C). Don't worry you don't need knowledge of HTML or Java for this. In most cases it's a copy & paste thing.When you click on the + (or even the gadget type title) the gadget window will open up. Type in your title and then put your text or code into the box. I like images centered on my sidebar so I put the center code shown below (this is the word center in between <>) in front of codes I post (if there is no center code added already!) For this tutorial I am posting a link to a rainbow signature graphic from photobucket. When all your code is entered, click SAVE.The Page Elements window is the only one to be showing now. If you look at the top of my right sidebar you will see my new widget listed (D). Click view blog and the new widget shows (E)!Now lets say you want the widget you just added to be further down your sidebar. You can move widgets around by dragging the widget box to where you want. I want my new gadget below the button, so I dragged it below (E) and then clicked SAVE (G). You can see the new position of the rainbow graphic below (H).If you have 2 sidebars, you can drag between sidebars. Here I am moving the rainbow graphic across to the left sidebar (I) and then clicked SAVE (J). New position of the rainbow graphic is shown below (K).You can also post a widget without a title. Here I am posting an I Voted graphic. Click SAVE and view the graphic below.Finally, you can edit widget that have already been posted by clicking the Edit link (L), which will bring the widget window up which you can make changes to (then click SAVE) or even click REMOVE (on the left) to remove the widget entirely.Those are the basics and should give you enough info to post and edit widgets on your sidebar.