How to Install a Blog Button in Blogger or WordPress

Blog buttons are a popular way to allow people to share your blog with their readers. You essentially provide an image and code that people can copy and paste onto their blog, which would then share your unique blog button.

Most blog buttons are 125×125 pixels in size and have the name of the blog with consistent design branding. You can make a blog button yourself using Adobe Photoshop or a similar program. This tutorial picks up after you have your blog button designed and you now want to install the button and the scroll box that contains the sharing code.

Step 1  for Blogger:

Upload your blog button to a photo sharing site, such as Photobucket. After your blog button has loaded, copy the Direct link to your image and save it in a place you can reference (such as opening a new Notepad.)

Photobucket Direct Link

Step 1 for WordPress:

Upload your blog button to your Media Library by going to Media > Add New. After uploading the file, copy the File URL and save it in a place you can reference. Make sure you save the image after you have uploaded it.

Wordpress File URL

Step 2 for both Blogger and WordPress:

For Blogger, add a new HTML/Javascript Gadget to the section you would like your blog button. To find you Gadgets, click on Dashboard > Design > Page Elements. Click on the “Add a Gadget” link for the section you would like to add the blog button to.

For WordPress, add a new Text Widget. To find your Widgets, click on Appearance > Widgets from your Admin menu, then drag the “Text” box into the sidebar where you would like to place the blog button.

Use the following code for a horizontal layout (one where the image is to the left and the code is to the right):

Source code    
<center>
<a href="http://yourURL.com/"><img  style="border: 1px solid #474747;
margin-right: 5px; vertical-align: top;" border="0"
src="http://imageurl.com/image.jpg"/></a> <textarea rows="7" cols="12" >
<a href="http://yourURL.com/" target="_blank"><img
style="border: 1px solid #474747;" border="0" width="125"
alt="Your Website Name" src="http://imageurl.com/image.jpg" height="125"/>
</a></textarea>
</center>

Make sure your replace the following information with your links:
yourURL.com = the link to your website
imageurl.com/image.jpg = the link to your blog button image (which you copied and saved from Photobucket or the Media Library)
“Your WebsiteName” = the name of your website

Here is an example of how this code appears:

Use th following code for a vertical layout:

Source code    
<center>
<a href="http://yourURL.com/"><img  style="border: 1px solid #474747;"
border="0" src="http://imageurl.com/image.jpg"/></a><br /><br />
<textarea rows="7" cols="12" ><a href="http://yourURL.com/" target="_blank">
<img style="border: 1px solid #474747;" border="0" width="125"
alt="Your Website Name" src="http://imageurl.com/image.jpg" height="125"/>
</a></textarea>
</center>

Here is how the vertical code appears:

Within both codes, there are a couple of things you can do to adjust the scroll box. Notice, in the area that says <textarea rows=”7″ cols=”12″….>. By increasing the number of rows, you will adjust the height of the scroll box. By increasing the number of cols (columns) you will adjust the width of the scroll box.

After updating the code and adjusting the size, make sure you save your gadget or widget, and you’re done! You’ve just added a blog button and sharing code to your Blogger or WordPress blog.

15 Comments to “How to Install a Blog Button in Blogger or WordPress”

  1. Sherri says:

    I need to make one of these later today (a first!) and am SO glad I found your post! Fingers crossed, I actually think with your instructions I can tackle it! Thank you!!!!!

    • Creative Patience says:

      Glad we could help! Let us know if you have any problems during the process. :) Look forward to seeing your new button!

  2. Melanie says:

    Thank you, thank you, thank you!!!! I FINALLY made my own blog button. I have been trying to learn for abour 3 years now and kept giving up after reading bad instructions. I followed your directions and voila, I now have a blog button that I created myself. Sweet! Thanks so much :) .

  3. Tracy says:

    Hello. Your instructions for a blog button are great!!!! However, I’m having a little problem. I added the widget & the code. The scroll box is there, but my photo is not coming through. There is a little x in a box. I did copy the direct link from flickr & think I did everything else right. I just do not know why my button image is not appearing. Can you help? You can check out my blog to see how the button looks thus far. Thank you soooo much!!

    Tracy – Mama-press

    • Hi Tracy,

      We just checked out your blog and it looks like it’s working now? We see your blog button correctly. We’re so glad these instructions were useful. Thanks for stopping by!

  4. Julie says:

    Thank you so much for this awesome tutorial! I just created a new blog and wanted a button to go with it but figured I would never be able to figure it out! Now I have a cute blog button! Thanks again!

  5. brilliant tutorial!
    thankyou for this. button all loaded.
    cheers, cheryl.

  6. Muisng Momma says:

    Thank you! These instructions were easy to follow and much easier than others I read that required accessing a file server and I bunch of stuff I haven’t figured out yet! My button is up – yahoo!!!

  7. [...] without Photoshop from Freckleberry FindsHow to make a blog button grab code from Life With LeviHow to install blog buttons & share code on Blogger and WordPress from The WIC ProjectHow to disable Captcha in Blogger from Sadie LankfordHow to make a recipe [...]

  8. Abbie says:

    HI..I followed the instructions for wordpress but for some reason the scroll bar is not popping up..only a rectangular blank box and the actual button. Any suggestions? Thanks so much!

  9. Abbie says:

    http://itsallcyclelogical.wordpress.com is the blog link. now the button is popping up twice instead of the scroll bar.

  10. Deanna says:

    Thank you so much for this how to! Your instructions were very easy to understand!

Leave a Comment