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.

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

  1. What a information of un-ambiguity and preserveness of precious knowledge on the topic
    of unexpected feelings.

    Check out my blog – family and marriage counseling

  2. Why users still use to read news papers when in this technological world everything is
    existing on net?

    my web-site – renting carpet cleaners california

  3. Excellent blog! Do you have any tips and hints for
    aspiring writers? I’m hoping to start my own website soon but I’m a little lost on everything.

    Would you propose starting with a free platform like WordPress
    or go for a paid option? There are so many choices out there that I’m completely overwhelmed ..
    Any tips? Kudos!

    My site – starting a carpet cleaning business

  4. Thanks for every other informative web site.

    Where else may I am getting that type of info written in such a perfect way?
    I’ve a venture that I am just now running on, and I have been on the look out for such info.

    my webpage – car transmission sacramento

  5. I’m really enjoying the theme/design of your blog.
    Do you ever run into any web browser compatibility problems?
    A number of my blog readers have complained about my site not working correctly in Explorer but
    looks great in Firefox. Do you have any solutions
    to help fix this problem?

    My web blog :: head gasket repair cost sacramento

  6. Write more, thats all I have to say. Literally, it seems as though you relied on the
    video to make your point. You obviously know what youre talking about, why waste your intelligence on just posting videos to your blog when you
    could be giving us something enlightening to read?

    Feel free to visit my blog – estimate car repairs sacramento

  7. WOW just what I was searching for. Came here by searching for marrige counseling

    My web site: affordable family counseling

  8. I visited multiple websites but the audio quality for audio songs current
    at this website is genuinely excellent.

    my web site: diet pills that work fast

  9. this cource says:

    My brother recomjmended I would pssibly like his web site.
    He was toally right. This submit actually ade
    my day. You can not imagine simply how so much time I had spent for
    this information! Thank you!

  10. May I simply just say what a comfort to discover somebody
    who genuinely understands what they are discussing on the net.
    You actually understand how to bring an issue to light and make it important.
    More people ought to read this and understand this side of the
    story. It’s surprising you’re not more popular because you definitely possess the gift.

    Here is my site: heating and cooling repair hialeah fl

  11. hi!,I really like your writing very much! share we communicate more approximately your post on AOL?
    I need an expert in this area to resolve my problem. Maybe that is you!
    Looking ahead to look you.

    Stop by my web site; arrow sheds reviews

  12. Frank says:

    Great post.
    Thanks for sharing this.

Leave a Comment