04 February 2011

Making Grabable Buttons *Updated*

Have you spotted blogs which have those "Grab my button" thingies on their blog and wondered how on earth they do it? Ever wanted to have one for yourself? OK, here's how...

First, sign up to an image hosting site. This is where you will need to upload the button(s) you make.

Create a graphic in PhotoScape, Photoshop or even Paint.

180x180 pixels is the standard size. {You can alter the size by changing the number in the code below}

Copy this code into a word document and save it for future reference...


<!--grab button header -->
<div class="grab-button" style="width: 180px; margin: 0 auto;">
<img src="YOUR IMAGE URL" alt="Grab button for YOURBLOGNAME" width="180" height="180" />
<!--end grab button header -->
<!-- button code box -->
  <div style="margin: 0;
        padding: 0;
        border: 1px solid gray;
        width: 180px;
        height: 100px;
        overflow: scroll;">
&lt;div class="BUTTON NAME" style="width: 150px; margin: 0 auto;">
&lt;a href=" YOUR BLOG URL " rel="nofollow">
&lt;img src="YOUR IMAGE URL" alt="YOUR BLOG NAME" width="180" height="180" />
</div> <!--end grab-button --></div>

Then follow these steps.
  1. Replace the GREEN highlighted text with your blog address, e.g. http://greatfun4kidsblog.com/
  2. Replace all the RED highlightedText with your Blog Title, e.g. Greatfun4kids
  3. Replace all the PINK text with your image address generated by Photobucket (when you hover your mouse over your image several rows of code will appear beneath it. Copy the "Direct link" code)
  4. Give your Button a name by replacing the BLUE Highlighted text
  5. Alter the display size of the button and text box by changing the BLUE TEXT numbers (if you want it bigger or smaller).
  6. Save your work!
Now all you have to do is copy your code (control+c) and paste it into an html gadget in your sidebar. It will be ready for others to Grab.


Grab button for Greatfun4kids
<div class="Greatfun4kids" style="width: 230px; margin: 0 auto;"> <a href="http://greatfun4kidsblog.com" rel="nofollow"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vTUO1Q3LfF2S_KIc4v1EnVZphFoLUvsB1R5UjiQiR9CJnhVs2v6UyEBVmca2vADlFUzF8j7Ihs-M9JrQ2HkQ1SejNpGWr0yEuv5YF0jh_R-JTwNSZAWBQ0fHN6hx9GQsvPT0UCwGJ1U/s1600/lemonade+button.jpg " alt="Greatfun4kids" width="230"/> </a> </div>

(P.S. You can say *thank you* by following me)


FOLLOW ME ON Facebook // Twitter // Instagram // Bloglovin //


Cat said...

Yeah I did it - however at 140x140 it was too squished so I had to do 200x140 - don't know what went wrong there - but Yeah thanks for more great tips

Anabella said...

Thanks! Thanks! and Thanks!! I had one button, but it didn't work well. You are great! I'm sooo following you!!

Kirsty said...

Great tips, thank so much. Have also grabbed your freebie social Buttons.

You have a lovely blog. Will be back :)

Anonymous said...

Thanks for the tips!! I just made my first grab button. This was such a simple tutorial, but so helpful!

Unknown said...

ok I'm loving your site, I have a question. This works almost perfectly for me. I'm getting the image and the grab box. But I'm also getting code showing up behind the button image and right underneath it. Any ideas what I'm doing wrong? Thank you!

Rachel said...
This comment has been removed by the author.

Post a Comment