Blogging Tip: Add a Grab My Button Section to Your Blog

Please Note: If you are reading this blog post via email, your email client may alter or interpret the html code. If you want to copy the code, please click on the title of the blog post to be take directly to this post on the web.

As one who designs custom buttons and banners for bloggers, I am constantly asked the same questions over and over. The question that I am asked (almost daily) is, “How do I add a way for my readers to grab my button?”

While I will continue to assist my clients in any way possible, I thought it might benefit my readers if you could quickly and easily find the code to add your own “Grab My Button” section to your blog.

All it takes is a little bit of html code to make your button magically appear, along with a text box underneath it.

If you’re using blogger, you’ll need to go to your “Layouts” tab, then “Add a Gadget” to your sidebar. When the box pops up, you’ll need to select the “Jave/HTML” option.

On wordpress, in your dashboard, under Appearance, click on Widgets. Then, drag a “text” box over to the area of your sidebar that you’d like the button to appear.

Here’s the code you will need to put in either your gadget or widget box:

<center><img src=”INSERT LINK TO IMAGE HERE”/> <textarea rows=”7″ cols=”12″>
<a href=”INSERT LINK TO YOUR BLOG HERE” target=”_blank”><img src=”INSERT LINK TO IMAGE HERE” border=”0″ alt=”INSERT BLOG NAME HERE”/></a></textarea></center>

Now, let me break that code up for you so that it’s a little easier to understand:

  • Adding <center> at the beginning of the code, and </center> at the end of the code will do just what it says: center your button in your sidebar.
  • Where it says “INSERT LINK TO IMAGE HERE” – in BOTH of those areas, you will need to add the link to where your image is hosted. It may be paypal, it may be your personal website. Just know where your image is hosted, and be sure to include the http:// when you add the link in.
  • The “<textarea>” section will be the little box that appears next to your button containing the code your readers will grab.
  • Make sure you add the http:// to your blog’s website address when you insert it in the area that says “INSERT LINK TO YOUR BLOG HERE.”
  • target=”_blank” means that when readers click on the button your readers will post, your blog will automatically open in a new tab or window.
  • border=”0″ prevents that dreaded blue or purple box going around your button.
  • alt=”INSERT BLOG NAME HERE” – Put the name of your blog in that section. For my personal blog (this blog), I’d put “5 Vinez Monkeys” just like that.

Now, let me show you an example of this code in action.

This code:
<center><img src=”http://www.angelavinezdesigns.com/supermom125.jpg”/> <textarea rows=”7″ cols=”12″><a href=”http://www.supermomsanctuary.com” target=”_blank”><img src=”http://www.angelavinezdesigns.com/supermom125.jpg” border=”0″ alt=”Super Mom Sanctuary”/></a></textarea></center>

Would look like this:

Easy, right?

So, what are you waiting for? No excuses! Go add a “Grab My Button” section to your blog right now.

Don’t have a button to share? No problem. I can help. Pricing for 125×125 buttons starts at just $3! And not only do you get the button, but I will host your button on my website forever! I’ll send you the code to publish your button to your blog once the design is complete. Click here to pick the size/style of your custom button or banner, and I’ll get it made just for you!

If you successfully add a “Grab My Button” section to your blog thanks to this post, leave me a comment. I’d love to stop by and see!

Angie Vinez (2872 Posts)

Angie is a wife and mother to 8. Her life revolves around cooking, cleaning, laundry, and other household duties. She is passionate about her life in Christ and wants to encourage other mothers in their own walk of faith. Angie is active on many social media networks, loves technology, photography, and graphic design, and loves creating blog designs for other mom bloggers.



Comments

  1. 1
    Proud Parents of Halainah Grace says:

    Hey, love the blog and I am a long time reader. Just wanted to point out that your HTML code for the widget box has an error. The a href tag must be placed first followed by the img tag. If you copy the code as you have it displayed here, the button will not be a hyperlink.

    Thanks for a great blog,

    Tony

  2. 2
    Proud Parents of Halainah Grace says:

    Never mind…something is still wrong. The code allows for the picture to be a hyper link but also makes the text a hyper link.

  3. 3
    Proud Parents of Halainah Grace says:

    OK, this is what worked for me after the center tag.
    Placing the a href tag first followed by the img tag, followed by the textarea tag, followed by the a href tag, followed by the img tag. And of course closing each tag.

  4. 4
    Aging Mommy says:

    OK I think I did this right and it is all working – just need someone to test it! I am a technophobe but was able to follow the instructions so thank you!

  5. 5

    Oh My Goodness! Thank you so much for this! I about drove myself nuts before finding this. So Easy…

  6. 6

    Thank you a zillion times for making this so easy!! I've been putzing with this for at least 1/2 an hour before I googled and found your easy directions… how funny that it was on a blog that I already subscribe to! At least I think I have it working now.

    http://www.moreorlesley.blogspot.com

  7. 7

    Thank you so much! I had done this before, but then decided to change my button and lost all my other info. Your site was the only one that worked for me! All the others must have been the wrong code or something. Thanks again! 🙂

  8. 8

    I put my grab my button up thanks to you! http://danajeanward.blogspot.com

  9. 9
    Dime Store says:

    Thank you for taking the time to post about how to do this. I found your site by searching for this very thing! It was easy to follow and easy to use. I posted my button at http://www.dimestorebudget.com

Speak Your Mind

*

CommentLuv badge