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;">

<div class="BUTTON NAME" style="width: 150px; margin: 0 auto;">

<a href=" YOUR BLOG URL " rel="nofollow">

<img src="YOUR IMAGE URL" alt="YOUR BLOG NAME" width="180" height="180" />

</a>

</div>

</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 A BUTTON

<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)

MORE BLOG TIPS

• Bloggy DIY for Newbies and Wannabes
• Blog Tips & Tricks for a Delicious Blog
• Blog Tips: Making & Using Tabs (Pages)
• Blog Tips: making Photo Collages & using PhotoScape