adding networking/feed buttons to your blog

Adding your navigation/feed buttons to your blog is easy! Just follow these steps to create the hyperlink between the button image and the URLs of your Twitter, Facebook, RSS, and Google Reader pages.

1. Upload the Twitter button to a new, blank post on your blog, under the Edit HTML (not Compose) tab and the "none" alignment setting. You'll see a strip of HTML that looks roughly like this:

2. Replace the code in red with your complete Twitter page URL, leaving the quotes intact. Now the strip of HTML will look something like this:

(Remember, your code will be different, but what you're looking for is the section following href=)

3. Next, add "target="_blank" to the code, just before href, giving you this:

This will cause clicking on the button to launch a new browser window. If you'd prefer not to launch a new window, you can skip that step.

4. Now, space the whole block of HTML code down a few lines, to give yourself a little room to do the next button. Repeat the process for each of the remaining buttons.

If you don't know how to obtain the URL for your Google Reader or RSS feeds, see this page.

5. When you've hyperlinked each image to its URL, copy/paste the entire block of code onto your desktop or notepad (anywhere you save a temporary bit of text). Once you have the HTML for your buttons, you can actually republish the post you used (or delete it, doesn't matter) without actually publishing the images for the buttons themselves. This is since once you've uploaded an image to your post, it's been saved to your Blogger Picasa album.

6. Return to your Layout, and choose Add a Gadget, wherever you'd like your sidebar buttons to be*. Choose a JavaScript/HTML gadget, and paste the entire strip of HTML for all of your buttons into the gadget window.

Remove all of the spacing between the blocks of code to get the buttons to scoot together. You'll have a big, continuous block of HTML that'll look something like this:

7. In order to center align the group of buttons, frame the entire block of HTML in the following code:

(Or If you'd prefer to left or right justify the buttons, change "center" to "left" or "right", accordingly.) Now the block will look something like this:

Save the gadget and refresh your blog (by clicking the header) before checking to make sure the buttons have been added correctly.

*In most cases, the sample templates have the networking buttons added to the sidebar area. In some instances, however, the buttons have been added into the same JavaScript gadget as the navigation menu, or in the post footer area, or in the element directly above the main posting area. You may wish to experiment with where you'd like your buttons to be.