Easily Share Your Blog Button with Readers

Ever wonder how to share that pretty blog button you designed and slaved over for hours with others so they could post it on their blogs as well?  Well here's the easy way to share (and more people will share your blog button if you 'do the work' for them!) your blog button!

First, you need to upload your blog button to a photo sharing site such as Photobucket.  Once your button has been uploaded to your account, it should look like this:

The information you see below will appear when you hover your mouse over the uploaded image.  Move your mouse down to the IMG code box and click on the link in the space to the right which will automatically copy this string of code for you.

Open a Notepad or WordPad window (or any program you have that will let you do simple unformatted text) and paste your copied code into that document.  It should now look similar to this (only with your links):

[IMG]http://i684.photobucket.com/albums/vv209/themadwhitewoman/LifeInAHouseOfTestosterone1-1.gif[/IMG]

Hit enter a few times to put some space between your copied code and the following.  Copy this exactly as is and we will change the highlighted parts to be specific to your blog and blog button:

<a href="http://YOUR BLOG LINK HERE.COM" target="new"><img src="INSERT THE IMG LINK FROM ABOVE HERE" border="0" title="YOUR BLOG NAME"></a><br>
<br>
<textarea rows="06" cols="20"><a target="new" href="http://YOUR BLOG NAME HERE.COM"><img src="INSERT THE IMG LINK FROM ABOVE HERE" title="YOUR BLOG NAME" /></a></textarea>

So, my image link would be: http://i684.photobucket.com/albums/vv209/themadwhitewoman/LifeInAHouseOfTestosterone1-1.gif and my blog link would be http://lifeinahouseoftestosterone.blogspot.com.  So using these links and changing the information highlighted in RED above, my completed code would look like this:

<a href="http://lifeinahouseoftestosterone.blogspot.com" target="new"><img src="http://i684.photobucket.com/albums/vv209/themadwhitewoman/LifeInAHouseOfTestosterone1-1.gif " border="0" title="Life in a House of Testosterone"></a><br>
<br>
<textarea rows="06" cols="20"><a target="new" href="http://lifeinahouseoftestosterone.blogspot.com"><img src="http://i684.photobucket.com/albums/vv209/themadwhitewoman/LifeInAHouseOfTestosterone1-1.gif " title="Life in a House of Testosterone" /></a></textarea>

Change the links in red above as I did to reflect YOUR personal blog address and YOUR personal blog button image code.

Next, go to your Blogger dashboard and find your blog and click on Design and then we are going to Add a Gadget.  Look for the HTML/JavaScript gadget and click on that.  When your gadget opens you are going to give it a name and then paste your completed information from above into the Content area.

Your gadget should now look like this:

Now before you hit "save" and add this to your blog design – at the very beginning you need to add <center> and then at the very end directly after </textarea> you need to add </center>.  Once you have done that, hit "save" and then move your gadget to where you would like it to appear on your blog.

What these two codes do is tell it to center all of the information between.  This way your information shows up neatly centered on your blog – like this:

That's it!  If you wish to adjust the width of your text box – you can play with the area that says "cols=20" and just adjust the numbers higher (like 40) to make it wider if you would like.  Now anyone can snag your blog button you spent so much time on and easily paste the code into an HTML/JavaScript gadget on their blog and share the love!

This tutorial is of my own design and creation and copyrighted to ©Kimberly Miller.  This tutorial was written by me on February 28, 2012.  Any similarity to any other tutorial is purely coincidental.  If you wish to share this tutorial with others, please only share the link to this tutorial in your Yahoo/Google groups and direct others to my blog to view the tutorial post.  Thank you!