Thursday , 21 August 2014
Today I'm going to teach you how to create a grab button for your blog sidebar. Grab Buttons are those little images that usually have html code and a scrollbox underneath.

How to Create a Grab Button For Your Blog

KEEP CALM AND BLOG ON

KEEP CALM AND BLOG ON

How to Create a Grab Button For Your Blog

Today I’m going to teach you how to create a grab button for your blog sidebar. Grab Buttons are those little images that usually have html code and a scrollbox underneath. I promise, you’ve seen ‘em. Some blogs will have many of these grab buttons on their sidebar- representing other blogs they follow. Now, it’s time to create & share your own!
Here’s what you’ll need:

  1. A blog
  2. A Photo-editing program (Photoshop, GIMP, etc)
  3. Stock photos or other graphics/ logos
  4. Grab Button Code

First, let’s talk about what size we want our grab button to be. For the blog themes that I design, I always go with a 125×125 image for grab buttons. Many sidebars are at least 250px wide, which would allow you to display two of them side by side. The Grab Button size is up to you!

Once you have created an image to your liking, we can add it to your blog. Upload the image to a photobucket or hosting account.
Now, copy the code below:
<div align=”center”> <a href=”http://BLOGADDRESS.com” target=”_blank”><img alt=”BLOG TITLE” src=”http://GRABBUTTONLOCATION.gif”/></a> </div> <div align=”center”> <form><textarea rows=”6″ cols=”20″><a href=”http://BLOGADDRESS.com” target=”_blank”><img alt=”BLOG TITLE” src=”http:// GRABBUTTONLOCATION.gif”/></a></textarea></form> </div>
and add it to your blog. For Blogger, you will add it to a new HTML/Javascript Box, and for WordPress you will add it to a new Text Box. (See Below)

Change the titles and links (in capital letters), and click save. Preview your blog and pat yourself on the back. Woo hoo, you did it!
For those of you who feel anxious just looking at the code above, you can always have the code generated for you:
Grab Button Code Generator.
Have fun creating your new grab button :) blog ad1

Related Posts Plugin for WordPress, Blogger...

28 comments

  1. Thanks for the great how-to. I’m glad someone if finally sharing how to do this well. I can’t tell you how many confusing & not so great how-tos I read on making buttons for your blog I came across when I started making them for mine! Thanks!

  2. Thanks for the information. This is just what I’ve been looking for.

  3. This is excellent. It might take me a while to actually get around to doing it but I definitely will! Thanks!

  4. I always wondered but didn’t want to find out how much this would cost me. Now, it’s free and I can do this! Thanks for making lives easier one post at a time.

  5. You’re very welcome, so glad to help!!! =D

  6. OK, I see how you are creating the button, but what do I use it for!?

  7. Thank you! Great info, as always.

  8. I just emailed a friend asking how to do this. Thanks for the info (bc I haven’t heard back yet!)

  9. I had to use the code generator, but I got it to work! It’s on my site toward the bottom if you want to check it out or grab my button! thanks for sharing the info!

  10. Ohmygosh! Finally an explanation and how-to.
    Thank you so much!! Wow, if you only knew what frustrating and confusing information I’ve had about this subject.
    I think blogs should carry this {gadget?} standard as part of the template for newbies! They have so many other gadgets that don’t seem as important.
    Thank you again!
    Tammy

  11. Thanks for that info. I was wondering about how to do that myself and wha la, here you are with more helpful tips!
    Thanks

  12. Thanks for the info! Very helpful!

  13. Thank you for the instructions. I am a novice at all of this and I was able to at least create a button and put the code on my blog. I have been trying to create one unsuccessfully but your instructions were simple and easy. Thank you
    Julie Hand
    myartyinspirations.blogspot.com

  14. thank you! I have been meaning to get around to this forever :D

  15. I have tried this a dozen times and it’s not working for me. Not sure what I’m doing incorrectly.

  16. I feel stupid asking but I don’t get it. I make an image of what I want the button to look like and then I past the code in my text box but how do I get the image in to the code?

  17. It worked! I now have a button for other bloggers to grab. Click on the link she has below to generate your own code. It lets you paste the image url into a form and generates the button, and the button “grabber” text

  18. You said:
    For Blogger, you will add it to a new HTML/Javascript Box

    I’m snooping around, but I can’t find this part on Blogger =/ Can you point me in the right direction?

  19. Thanks so much! Great resource!

  20. Hi. I am really confused about the image url. I am using WordPress. Do I save the image on the main page and add the code in a text box beneath it? Will the image url be “home page/image.jpg”? When I use the code generator I do not know what to put for the image url. I feel really dumb.

  21. Thanks so much! I could’t have done this with out you!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

%d bloggers like this: