How to Code a Grab Button for your Blog

How to Code a Grab Button for Blog Posts

Written by: Anyonita Green on 12/19/2013

One of the things I get asked to help out with most is creating grab buttons for my fellow bloggers. For some reason this necessary blog item seems shrouded in mystery and approached tentatively.

But there's no need, guys. Creating a grab button is easy peasy! By the end of this tutorial, you'll be a dab hand at it, too! I'm going to show you how to code a grab button for your blog or website.

This code should work with Blogger, Wordpress and any website where you have access to the HTML. 

In terms of location, you can put the code anywhere you have access to the HTML: in blog posts, footers and sidebars or even in the body of your marketing emails. Let's get on it!

---

Grab buttons are great ways for your readers to share your blog with their readers. By having a grab button, you make it easy for anyone to copy and paste the necessary HTML or your blog's logo or any other picture you want to associate with your blog.

Use your grab button for ad swaps, to promote your link party or to promote blogging groups your belong to or blogging series you may be running or involved in. The possibilities are endless and it doesn't matter what you want to use the grab button for, the code is always going to be the same, with only a few things to change each time.

<div class="Anyonita-Nibbles-button" style="width: 140px; margin: 0 auto;"> <a href="http://www.anyonita-nibbles.com" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA90q4LqdZuSbkr1lQ4YdQl1A-EFvjwgGaitBevRtjMRfiQD39GhdzdMkuLlslA2czik5e0tcHu7c-p9u9m4HD04MkUld8ClFRrf66tCEfBbvfToD63DEKo1vSeCU43T6qi_gRqtzXIJ0/s243-no/AnyonitaNibblesButton.png" alt="Anyonita Nibbles" width="243" height="243" /> </a> </div>

My grab button is housed in my right sidebar, but you can put yours wherever you'd like.

Make your Button:
Upload your image to a hosting site.
I prefer to use G+ Web Albums because I know that the hosting is reliable and I already have a private album where all of my images are hosted. I would suggest you do the same. If you're a Wordpress blogger, you can upload the image to your media library. 

Copy and paste the grab button code. Copy this code and paste it into a new HTML/Javascript gadget on Blogger or a Text widget on Wordpress. Alternatively, paste it into the place you would like it to appear on your webpage or in your blog post.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!--grab button header --> <div class="grab-button" style="width: 243px; margin: 0 auto;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA90q4LqdZuSbkr1lQ4YdQl1A-EFvjwgGaitBevRtjMRfiQD39GhdzdMkuLlslA2czik5e0tcHu7c-p9u9m4HD04MkUld8ClFRrf66tCEfBbvfToD63DEKo1vSeCU43T6qi_gRqtzXIJ0/s243-no/AnyonitaNibblesButton.png" alt="Grab button for YOUR BLOG NAME" width="243" height="243" /> <!--end grab button header --> <!-- button code box --> <div style="margin: 0; padding: 0; border: 1px solid gray; width: 243px; height: 150px; overflow: scroll;"> <div class="YOUR-BLOG-NAME-button" style="width: 140px; margin: 0 auto;"> <a href="http://www.YOUR-URL.com" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA90q4LqdZuSbkr1lQ4YdQl1A-EFvjwgGaitBevRtjMRfiQD39GhdzdMkuLlslA2czik5e0tcHu7c-p9u9m4HD04MkUld8ClFRrf66tCEfBbvfToD63DEKo1vSeCU43T6qi_gRqtzXIJ0/s243-no/AnyonitaNibblesButton.png" alt="YOUR BLOG NAME" width="243" height="243" /> </a> </div> </div> <!--end grab-button --></div>

Customize the code to reflect your blog or site
Next, you'll need to change just a few bits of the code to reflect your blog. Here's what you do:

In line #2, change the width from 243px to match the width of the image used.
In line #3, change the img src URL from mine to reflect your image's URL. If you are hosting your image on G+ photos, you will need to right click on the image and choose the "copy image location" option.
Still in line #3, replace the YOUR BLOG NAME with the name of your blog.
Lastly in line #3, change the width and height to reflect the width and height of your image.
In line #9, change the width to the match the width of your image.
In line #10, change the height to make the box as long as you would like it to be.
In line #12, replace YOUR-BLOG-NAME with the name of your blog.
Also in line #12, change the width to match your image's width.
In line #13, change YOUR-URL to reflect the URL of your blog.
In line #14, change the img src URL from mine to your image's URL.
Also in line #14, change the alt YOUR-BLOG-NAME to reflect the name of your blog.
Finally, in line #14, change the width and height to reflect the width and height of your image.

That's it! You've done it! Now go test out your grab button and make sure it works. :) If you run into any issues, please feel free to leave me a comment and I'll be happy to help. And don't forget to leave me a comment with a link to your blog so I can check out your fab button! 

Addendum: In May 2014, I received a very bullying email from a fellow blogger accusing me of "lifting" this tutorial from her blog and therefore violating her copyright policy. Despite my emphatic explanation that this was certainly not the case, she beleaguered the notion that I violated her copyright. I wanted to make you, my reader, aware of this bogus claim and assure you that I have not in this instance or any instance ever and will never take someone's work and pass it off as my own. I hope you trust that the time and effort that goes into every post on Anyonita Nibbles is the result of my own hard work and dedication and that it is never ever at the expense of another blogger. The fact of the matter is that when it comes to recipes and blog tutorials, there is bound to be some overlap. This does not mean that a work has been plagiarized. However, according to the DMCA, if someone feels their work has been plagiarized, the accused must respond. This is my response to the outrageous email I received from the bullying, unrealistic blogger and this is my statement that this post is not in any way shape or form a replica or tweak of any post on her or anyone's blog. This is also my statement this post has not been influenced by any work on her blog or anyone else's blog, either. ---Anyonita

Want more blogging tips? Check out these tutorials:

1 SEO Tip that will Improve your Food Blog Overnight 

How to Add a Read More Image to Posts on Blogger

No Follow vs Follow Links