Blog Buttons

Until yesterday, I had seen people discussing blog buttons and wanting to trade them, etc., but I didn't really know or understand them.  But then I was offered a sponsorship on a great blog so I thought I should look into this whole blog button thing.  Turns out it's relatively easy with relatively even with little to not experience with HTML programming.  So how do you make a button you ask?

First, you need to upload your button image to a photosharing site.  Since I use blogger for this blog, I used Picasa Web albums.  In Picasa, you need to make sure the images are shared either publicly or to only those with the link.  This is shown on the right hand side of the screen.  Next to the image it will say either "Limited" or "Public." When you click on your desired image, the image properties will appear on the right side of your screen again.  There is a link that says, "Link this photo."  Click on it. You want to use the code from the "embed image" text box, making sure the "Hide album link" check box is clicked.

Copy this code into a HTML gadget for your blog.  Your code should look something like this:

<a href="https://picasaweb.google.com/lh/photo/295RfnwLM_IABXc6TNPVrnv58F0k6oa5OcBodAp-5bk?feat=embedwebsite"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" height="144" width="144" /></a>


To make it work we need to make a few changes.  Change the content in bold pink to the website you want to link.  For me, that was here, StitchSilly.blogspot.com

<a href="https://picasaweb.google.com/lh/photo/295RfnwLM_IABXc6TNPVrnv58F0k6oa5OcBodAp-5bk?feat=embedwebsite"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" height="144" width="144" /></a>
Now your code should look like this:

<a href="http://stitchsilly.blogspot.com"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" height="144" width="144" /></a>


Next we want to make sure when someone hovers over your image your title pops up (more advertizing here!).  Also, the height and width dimension aren't really needed so we'll delete these and replace it with the following code with the changed code in bold pink:

<a href="http://stitchsilly.blogspot.com"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" alt="Stitch Silly" /></a>


This creates the image and it's link back to your site and is the code that you will share with others to share your button.

But what if you wanted to advertize and let people grab your button at their leisure?  You can add this code around the above code to create a text box below your image:


<textarea cols=”15″ rows=”4″ wrap=”virtual”>YOUR CODE HERE</a></textarea>


Which will then look like this. 

<textarea cols=”15″ rows=”4″ wrap=”virtual”>><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" alt="Stitch Silly" />>>



You will need to post both the initial code and the wrapped code in your HTML gadget.  This is what your final HTML code will look like:





<a href="http://stitchsilly.blogspot.com"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" alt="Stitch Silly" /></a>

<textarea cols=”15″ rows=”4″ wrap=”virtual”>><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" alt="Stitch Silly" /></a></textarea>

Click save, and check out the cool new button! Here is mine:

<a href="http://stitchsilly.blogspot.com"><img src="https://lh3.googleusercontent.com/-Dt7Pu-rncII/TdFKSPWRKNI/AAAAAAAABDU/PaQGnX8U7vU/s144/Logo.jpg" alt="Stitch Silly" /></a>