how to add hyperlinked sidebar buttons to your blog

If you've added any matching sidebar buttons to your template order - you'll need to add them to your sidebar and create a hyperlink between the button(s) and whatever you want the button(s) to link to. There are a few ways this can be done.

Picture Gadget. If you only have a single button, you can simply upload to your sidebar from your Layout as a Picture gadget. Simply click the blue Add a Gadget link wherever you'd like the button to be. Choose Picture, and then upload the button directly from your desktop. You can then insert the URL you want the button to link to in the blank "link" space.

Remember, you can link a button to a single post, an outside link such as another website, or even a label with your blog. (For more info about using labels as links, see here).

HTML/JavaScript Gadget. You can also add the button as an HTML/JavaScript gadget. Doing so will allow you to control the alignment of the button(s) (so, place it/them perfectly in the middle of your sidebar), as well as add multiple buttons that will sit flush vertically or horizontally. Here's how:

1. Upload the button as an image to any blog post on your blog under the Edit HTML (not Compose) setting (the size you choose doesn't matter).

2. Copy/paste the image's HTML code into a JavaScript/HTML gadget from Layout / Add a Gadget. After you've grabbed the image's HTML code, you can actually delete it from the blog post (and republish or delete the post). This is since once you've uploaded an image to a blog post, it will remain stored in your Blogger Picasa album (which is also where the image will be hosted).

3. Looking at the image HTML code, this is roughly what you'll see:



Replace the portion of the code in red with the URL you want the button to link to. This is how the hyperlink is created, and what will cause clicking on the button to link to a post, blog label, other website, etc.

So, if for instance I want the button to link to rainydaytemplates.com, this is what I'll change the href portion of the code to:



Or, if I wanted to link the button to the "photoblog" label from my shop, I would change the href portion of the code to this:



This way, clicking on the button will bring up all posts with the label "photoblog".

4. Finally, if you'd like clicking on the button to launch a new browser window, add target="_blank" just before onblur:



5. Save the gadget, refresh your blog, and check to make sure you've hyperlinked the button correctly.

If you have two buttons that you'd like centered on one line, upload and add the second HTML code directly after the first one, and remove all spacing between the two. You'll have a single block of HTML that'll look roughly like this:



6. Next, frame both images using this center alignment code:



(Replace HTML CODE GOES HERE with the HTML code for your images.) Now you'll have a single block of HTML that'll look roughly like this:



If you have four buttons, first add, hyperlink, and center the top two, then add, hyperlink, and center the bottom two immediately after that. In other words, center each horizontal line of buttons separately.

RETURN TO HOW TO'S FOR BASIC INSTALLATION
RETURN TO CLIENT RESOURCES