Grab My Button Tutorial

I've had a few requests on how to make a Grab My Button for your blog so I thought I would share a step by step tutorial to make it easier for you. It used to be a fairly straight forward coding but something has changed in the coding world and so I now use a button code generator and tweak it.

Step 1

Your first step is to choose a picture to use.  Most bloggers use square graphics as these are easier to place side by side or one under the other in your side bar.  The average size is 125 px x 125 px. Do not worry about the size of your graphic when creating because we can adjust this in the code.

I used Microsoft Publisher to create my graphic but there are plenty of great FREE tools out there to use.   Two that come to mind are Photoscape and PicMonkey. 

Photoscape is a FREE downloadable tool and is excellent.  I use it to make my photo collages for both here and my instagram.
Pic Monkey is an online mostly FREE tool that is fairly easy to use. 

Be sure to save your pic in a medium to higher resolution as you want a good looking picture not out of focus.

Step 2
There are a number of options to place your button on the web in order to use it.   You can use a free graphic host like Photobucket. If you have a self hosted site you can upload it and grab the HTML to the graphic or you can open a new post in your blog, add the graphic, open the HTML and grab your code from there.

 Here is an example of what this looks like and which code to select.

Check your code by pasting it into your browser and it should open a page with the graphic showing.

Step 3
Now it is time to generate your button code.  I recommend you use "Grab My Button" over at My Cool Realm.  It is very easy to use and generates code for both the Blogger and Word Press platforms.

• Type in your website/blog title.  
• Copy and paste your blog's URL
• Copy and paste the URL of your graphic

I

• If you are blogging on the Blogger platform leave the container type on Textarea.  If you are on a self hosted site or Wordpress then select Pre.
• Click Preview

If you are happy with the preview then click on Get Code. Select copy and add to your widget.

Re-size
When I added the code the graphic was to big and I needed to tweak the code in order for my button to fit in my side bar.  I know that working with code can be a little frightening but I encourage you to give it a go.  The code we want to add is sizing for the graphic.  So I want to tell the browser what size to show my picture so I need to define the width and height.

• When you look at the code it looks like this

<div align="center" style="padding: 5px;"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" title="Every Bed of Roses" alt="Every Bed of Roses" /></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block; width: 90%;">&lt;div align="center">&lt;a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"&gt;&lt;img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" alt="Every Bed of Roses" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

• img src this tells us where the image is stored
• I wanted my graphic in the side bar to be slightly larger than the standard 125 by 125 pixels so I changed the numbers and previewed it until I was happy with the size.  Add in height="160"  width="160" just before /></div> You can change these numbers to whatever you want them to be as long as your graphic fits in the spot you have placed it.
• Now you need to add in the height and width for the button in your grab text area so when people add it to their blogs the graphic is 125 x 125.  After the second img src add in  height="125" and then width="125" before the last forward slash.
• If your graphic is already made at 125 px by 125 px then there is no need to add in the code.  I add it the height and width when ever I add in buttons to my collection in order to make them all the same width and height.
• With the new code it will look like this

<div align="center" style="padding: 5px;"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg"  title="Every Bed of Roses" alt="Every Bed of Roses" height="160"  width="160"/></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"&gt;&lt;img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" alt="Every Bed of Roses"  height="125" width="125" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

Time to add it to your blog

• Go to your layout.
• Add a HTML widget
• Copy and paste the code in here.
• Save
• Move the widget to where you want your grab button to be.
• Save your new layout 

If you would like to partake in a button exchange, please grab my button add it to your blog and  leave a comment with a link to your blog. I shall then add you to my Bloggy Friends page. 

This page will be having a make over so be sure to watch for my 6 days of Bloggers to Follow post series starting next Saturday.

• On the crew with me in 2014 {11 January}
• Linky Parties and Blog Rolls for you {18 January}
• Blogs for the Home {25 January}
• Blogs to Encourage Wives and Mothers {1 February}
• Australian Homeschool Blogs {8 Februray}
• Homeschool Bloggers  {15 February}

Blessings
Chareen

Next Blogging tutorial Making 'Grab My Button' buttons line up {22 February}