How To Make A Blog Sidebar Button (Re-Run)

Sorry for the deluge of posts.  I've gotten all my 2011 challenges up and running.  I will make challenge buttons for anyone who wants to grab one for her/his blog, but other than that, we're in business.  All of the 2010 pages are still functional, so feel free to wrap up your 2010 reviews and post them as time permits.  In the meantime, I thought I'd re-post the How To Make A Blog Sidebar Button discussion in case anyone wants to give that a whirl this year.  Happy New Year!  Let the games begin.


***RE-RUN***

Sometimes, a blogger will want to display a picture on the sidebar of her blog that links to another blog (or a specific page on another blog). Often, book bloggers use these picture links, or "buttons," to connect to the various challenges in which they are participating.

Let's say you are participating in the 100+ Challenge on this blog, and you like to interact with other bloggers who have signed up for the same challenge by visiting their blogs, reading their reviews, and providing links for them to read yours. A blog button will allow you to access the specific page (in this example, the 100+ Challenge sign-up page) on Home Girl's Book Blog with a single click. Also, a well-made button will show an image (a picture) that suggests something about the link to increase the interest of your blog readers.

The two main pieces of information that you need to make a blog button are the following: a link to the page you wish to access, and a link to an image.

Notice I said a link to an image. Not an image that you have saved on your computer. You may wish to use an image that you have saved on your computer (like the 100+ Challenge image on this blog, which you can "rip" from this blog by right-clicking on the image and saving it to your computer); however, the image will THEN need to be stored in a public place. To store an image in a public place, you simply need to open up an account with http://www.photobucket.com/ (free and easy) or a similar image hosting site. Then, upload an image from your computer and follow the directions on the site to save the picture. Every photo that you upload will now have a "direct link" which you can copy and use later. You will probably wish to resize your photos so that they are smaller and fit neatly in your sidebar. Photobucket offers lots of easy photoshopping options, including resizing.

To begin, you will need to copy the URL of the exact page you wish to access when clicking your sidebar button. In our example, I would want to access http://j-kaye-book-blog.blogspot.com/2009/11/new-2010-reading-challenge-100-reading.html (the 100+ Challenge sign-up page) and not merely this blog's web address. Do you see the difference?

Now. Go to your blog's "Layout" option ("Layout" is accessed by clicking on "customize" on the top, right corner of your blog). Under "Layout," you will see an option to "Add A Gadget." Click the "+" mark to the right of the words "HTML/JavaScript." A blank box will appear. You may choose to add a title, or simply move your cursor so that it is blinking in the main box. It is time to begin to write the HTML code. For blog button making, you need to begin by typing these characters exactly: <a href="

Got it? Okay. Now, paste the direct page link that we copied before directly after the quotation mark. So now we have: <a href="http://j-kaye-book-blog.blogspot.com/2009/11/new-2010-reading-challenge-100-reading.html

Next, we close the tag by adding "> directly after the "html" ending of our link. All together now: <a href="http://j-kaye-book-blog.blogspot.com/2009/11/new-2010-reading-challenge-100-reading.html">

Now, we are ready to add the image code. Below the code (it doesn't seem to matter if you have a couple of hard returns between the lines of code, so long as the code lines themselves are not broken), type these characters exactly: <img src="

Now, we are ready to paste the "direct link" to the image we copied from photobucket directly after the quotation mark: <img src="http://i994.photobucket.com/albums/af69/HomeGirlRachel/HomeGirlsBookBlog/100_Reading_Challenge-1.jpg

Finally, we close the tag by adding these characters after "jpg":" /></a>

The whole image code should look like this: <img src="http://i994.photobucket.com/albums/af69/HomeGirlRachel/HomeGirlsBookBlog/100_Reading_Challenge-1.jpg" /></a>

So for our example, the whole code--direct page link and image together--should look like this: <a href="http://j-kaye-book-blog.blogspot.com/2009/11/new-2010-reading-challenge-100-reading.html"><img src="http://i994.photobucket.com/albums/af69/HomeGirlRachel/HomeGirlsBookBlog/100_Reading_Challenge-1.jpg" /></a>

Click "Save," and when you view your blog, you should have a button on the left or right sidebar, depending on where you added the code.

Voila. Magic.