How to Create a “Grab my Button” for your Sidebar

by Deby Coles

on April 4, 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.

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

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:

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?

Deby blogs about her newly found love for sewing at So Sew Easy, while at the same time offering advice to new and small bloggers about the options for earning money from their sites at Moms Make Money. She lives a tropical lifestyle in the Cayman Islands and when not blogging or sewing, loves to scuba dive. Read more of her tips on Facebook and Pinterest, and follower her on Twitter.

Join The Sverve Blog Community!

Never Miss A Blog Post Again

{ 5 comments… add one }

Sue April 4, 2013 at 1:55 pm

Thanks for sharing your expertise with us, Deby! I’m certain that there are a lot of button-less Sverve influencers who will soon be button-less no more!

Reply edit
Antionette Blake April 4, 2013 at 8:37 pm

Great article – thanks for sharing.

Reply edit
Mindi Davis April 5, 2013 at 12:16 am

The button is a huge mystery to me kind of like the Bermuda Triangle:) You answered a question that’s been on my mind for months now.

Reply edit
krystal April 11, 2013 at 3:15 pm

This didn’t work for me. I heard Blogger has changed things the past few days, could that be the reason? I did everything correctly but only a bit of text shows up where the button should be.

Reply edit
- Deby at Moms Make Money June 10, 2013 at 12:23 pm
  
  Hi Krystal, sorry I don’t use Blogger so I’m not sure why this no longer works. Are you able to bring up the button in a widget if you just use the image code? If not, then you may have to use two widgets underneath each other – the top one with the image and the one underneath with the text box.
  Deby at Moms Make Money recently posted…May Blog Income Revealed
  
  Reply edit