HTML Grab Button for Blogger

Today I am doing a tutorial on how to make an HTML Grab Button for Blogger.  Last spring I went into my button code to help someone else with their button, and lost my grab box.  I didn't know that Google had changed the format for the Grab Box, and have not had a Grab Box since.  When Diana from Diana Rambles came to visit me this summer, she explained what had happened, but I was a little lazy, and never took the time to make new grab boxes.  I figured it was about time, but realized that some of you may need some help also.  I found a tutorial at Code It Pretty that was great.  You can also go there to see her tutorial.

<div class="Adorned From Above" style="width: 150px; margin: 0 auto;"> <a href="http://www.adornedfromabove.com" rel="nofollow"> <img src="http://i1075.photobucket.com/albums/w437/debrabolocofsky/b9601f44-42af-4bcd-984a- ba6d2031c99a_zpsca7fdec4.jpg" alt="Adorned From Above" width="150" height="150" /> </a> </div>

HTML Grab Button Blogger Tutorial

1.  The first thing you will need to do is pick an image that you want to use for your button.  I made this at PicMonkey.com.

2. Then I uploaded it to Photobucket.com.  I then resized the picture to 150 pxl x 150 pxl.  It was originally 1000 x 1000 pxls

3.  You will then to work on your html code so that you get your picture and your grab box together.   The code below is what I used for my Link Party Grab Box.  I did this in notepad.  Just copy and paste.

<!--grab button header-->

<div class="grab-button" style="width: 150px; margin: 0 auto;>

<img src="http://i1075.photobucket.com/albums/w437/debrabolocofsky/b9601f44-42af-4bcd-984a-ba6d2031c99a_zpsca7fdec4.jpg" alt="Grab button for Your Blog Name" width="150" height="150" />

<!--end grab button header--

<!-- button code box -->

<div style="margin: 0;

padding: 0;

border: 1px black;

width: 150px;

height: 150px;

overflow: scroll;">

&lt;div class="Your-Blog-Name-Button" style="width: 150px; margin: 0 auto;"
&lt;a href="http://adornedfromabove.com" rel="nofollow">
&kt;img src="http://i1075.photobucket.com/albums/w437/debrabolocofsky/b9601f44-42af-4bcd-984a-ba6d2031c99a_zpsca7fdec4.jpg" alt="Your Blog Name" width="150" height="150" />
&lt;/a>
&lt;/div>
</div> <!--end grab-button--></div>

Change green text to the button pizel size
Change the red text to your blog's link

Change the blue text to the Name of You Blog

Change the fuscha text to the link for your picture in photobucket

4.  You can also change your button size by changing the green text to the pixel size your prefer.  

5.  You can change the margin size in the Button Code Box by changing the number of pixels for the margin.  You can also change the color to a color different from black by just typing in a new color.

5. To find the link for your picture in photobucket, you will hover over your picture and you click on the wheel and then click get links. Click in the direct link box.  It will say copied.  Then just paste it over the link for my picture link.

7. Next, pick your gadget,  it is the HTML/Java Third Party Script.  Give it a name, I named my Link Party Button.  Then I copied the text from Notepad and pasted it into my Widget's text box.

8.  Save, and then I clicked Preview, to make sure that it looked right.  If something is wrong, check your code and your different links.

9.  It should be working fine.  Again, since I am not an expert, I would refer back to Code It Pretty

I hope that this helps you to make a new HTML Grab Button for Blogger.  It really helped me a lot If you have any questions please feel free to contact me.

Have a great day.

Debi

Find us at these great parties