03 June 2011

Adding a blog button

You know those little blog buttons you see on the side bars of people's blogs? Well I've been wanting one for sometime but the thought of figuring it all out completely overwhelmed me. After 2 full and frustrating days of googling instructions and trying to upload it with the picture showing, I have finally done it!

Here are easy step by step instructions:
Thank you to Musings of a Housewife for her (finally!) easy-for-anyone-to-do instructions!

  • First you'll want to create your button.
Use either Picasa or Photobucket.
For mine, I used Picasa to create it, but then uploaded it into Photobucket for the URL you will need. At least for me, this was the only way I got the button to show up without hyperlinks.
Make sure that when you create it, it's a square. At the end, resize it to either 125x125 pixels or 150x150 pixels. Save it and upload. Like I said, I saved it on my computer in my pictures folder, then uploaded it to Photobucket.
You can use different software and pay to get images, but I had an image already so didn't bother.

  • For the button only. Replace the Web Page URL with the link to your blog. Make sure you keep the quotation marks! Replace the Image URL with the IMG code (for Photobucket). Delete the brackets [IMG] before and after the URL. Make sure you don't delete the quotation marks!
<a href="Web Page URL"><img src="Image URL"></a>

  • For the button with the drop box for the code (This allows others to snatch your code to put on their blog. This is an easy way for others to go to your blog, by simply clicking on your button in someone else's blog!)
This is what mine looks like (replace all of my info with yours, using above instructions for blog and image URL):

<a href="http://lifewellloved.blogspot.com/%22%3E%3Cimg src="http://i1131.photobucket.com/albums/m555/created2bholy/myblogbutton.jpg" border="0" /></a><p><textarea
2 class="tiny" name="1" rows="3" cols="18"><br /><a href="http://lifewellloved.blogspot.com/%22%3E%3Cimg
3 src="http://i1131.photobucket.com/albums/m555/created2bholy/myblogbutton.jpg" border="0" /></a></textarea></p>

Voila!

2 comments:

  1. Amanda, you totally made my day. I've been wanting one of these too! I'm going to try to make one. Thanks for the tutorial!

    ReplyDelete
  2. created2bholy03 June, 2011

    I've noticed that the code works better if you go to Musings of a Housewife site to copy it.

    ReplyDelete