Great Fun etc: 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" />

&lt;/a>

&lt;/div>

</div> <!--end grab-button --></div>

---------------------------------
Then follow these steps.

Replace the GREEN highlighted text with your blog address, e.g. http://greatfun4kidsblog.com/
Replace all the RED highlightedText with your Blog Title, e.g. Greatfun4kids
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)
Give your Button a name by replacing the BLUE Highlighted text
Alter the display size of the button and text box by changing the BLUE TEXT numbers (if you want it bigger or smaller).
Save your work!