I love link buttons. I love sharing other peoples buttons on my blog, using them to link back and I love it even more when people take my buttons and share them with the world on their site.
Now, if you notice, on this blog, in the sidebar, I have a link back button that has the picture on the top and the code on the bottom. If you go to this page on my blog: Button Up!, you'll find a bunch more buttons of all different sizes that users can pick up and share on their blog. With these, the code is all to the side of the picture. It took me a while to figure out how to do this, as most sites use the picture on top and code on the bottom.
I figured I would take the work out of it for all of you and share it here!
So, in blogger, it's pretty simple. I'm not that familiar with WordPress, but I'm sure the same principles apply.
You'll start with an image that is roughly 125px by 125px. You can vary this if you like. Typical button sizes are 80x15, 88x31 and 125x125. Have this image hosted somewhere, either in blogger, or some other photo sharing site like flickr, photobucket, etc. Have the url for this image handy.
Also have the url for your page with you as well, as when other users install your button, the button will then link back to you.
First, on your Design Tab:
Select "Add a Gadget"
Then Select "HTML/JavaScript"
Then a box pops up. In this box, insert the following code:
<table><tbody>
<tr> <td align="center"><img alt="My Nerdy Mom" src="http://i18.photobucket.com/albums/b144/junelley/button1.jpg" /> </td> <td align="center"><textarea cols="30" rows="8"> <a href="http://mynerdymom.blogspot.com/" target="_blank"><img src="http://i18.photobucket.com/albums/b144/junelley/button1.jpg" alt="My Nerdy Mom" /></a> </textarea> </td> </tr>
</tbody></table>
Replace all of the lines above with the matching color coded item below:
1- Name of your blog
2- URL of your image
3- URL of your site
4- URL of your image
5- Name of your blog
Additional Tweaks you can do:
If you change the values within the textarea cols it will change the height and width of your text box.
Hit save and then you can move your new link back button widget where you want it on your page!
Voila! This is what you should now have on your page! Feel free to snag my button if you like what I share on my site!
 |
No comments:
Post a Comment