Posted on: Thursday, April 4th, 2013

Do you have a button or banner for your blog?

You might have more than one – perhaps one for your blog itself and then several others for your popular posts or weekly features such as a linky party.  You can add these into your posts and sidebars – but their real value can come from asking others to post the button on their site, thereby advertising your site and drawing in more traffic.

Have you ever wondered how to produce that little box with the code you can grab to display a button?  You can make this easily for yourself.  Here’s how:

• You’ll need a button.  The standard size is 125 x 125 pixels.  But 150 can also work.  If designing your own button, design at 250 and then shrink the finished graphic for a more precise look and sharper finish.
• You will need to host the graphic online so it will display on other websites.  I suggest using Photobucket but you may already be using an alternative that you like.  Upload your button to Photobucket and make note of the direct link provided.
• Set up a widget in your sidebar – both Blogger and WordPress are very similar.
• Blogger -from your dashboard, select Layout, click Add a Gadget, choose HTML.
• WordPress – from your dashboard, select Widgets, then drag a Text/HTML widget to your sidebar where you want your button displayed.
• Within your widget/gadget you will first want to display the button graphic.  Use this code and replace DIRECT LINK with the direct link code for your image.

<center><img src=”DIRECT LINK” width=”125″ /> </center>

•  Now you need some additional code to display the code box underneath.

<center> <br /> <br /> <textarea cols=”13″ rows=”10″><a href=”YOUR WEBSITE ADDRESS”><img src=”DIRECT LINK” width=”125″/></a></textarea></center>

• You can change the size of the code box by changing the text area columns and rows.  Increasing the number gives you a larger box.  See what works best for the size of your sidebar.
• My completed code looks like this:

<center><img src=”http://i199.photobucket.com/albums/aa287/debycoles2/Blogging%20stuff/Website%20-%20buttons%20logos%20etc/250-square-banner.jpg” width=”125″ /> </center> <center> <br /> <br /> <textarea cols=”13″ rows=”10″> <a href=”http://moms-make-money.com”> <img src=”http://i199.photobucket.com/albums/aa287/debycoles2/Blogging%20stuff/Website%20-%20buttons%20logos%20etc/250-square-banner.jpg” width=”125″/></a></textarea> </center>

• Save your widget/gadget and you are done.  Now view your site and make sure when you copy and paste the code that your button shows up correctly.
• Congratulations – why not ask some of your favorite bloggers if they would like to exchange sidebar buttons?