Friday, January 18, 2013

Add a Grab My Button Code Box to Your Blog in 4 Easy Steps!

One of my New Year's resolutions was to add a "grab my button" feature to the blog. It became one of those things, where I knew I needed to do it, but the idea of making the logo, figuring out the code, etc. etc. just became overwhelming to think about. I am no novice when it comes to website HTML, but I learned through trial and error and it can sometimes take me days to figure out what I am doing wrong. 

I finally sucked it up today and added the button...

I struggled with the coding for about 10 minutes before I said to myself, "Self! There has to be an easier way!" I did a quick Google search and found a fantastic little site that will do all the nitty gritty work for you! But first...

Step 1: Make your logo. You should make it 125 pixels x 125 pixels. You can choose a size larger than this, but don’t go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am using the standard size: 125 x 125.

Use your image editing software to re-size your logo to 125 pixels by 125 pixels. Or, you can open a new file (125p x 125p) in your image editor, and create a new logo from scratch, like I did. Either way, you just need to make sure everything is clear, the wording is legible, and the overall impression is a good one. This button will promote your blog’s name, look, and mission all in one simple image.

This is the button logo ~ Copyright J.Rae & Little Mom on the Prairie
Step 2: Upload your image to your domain or to a public server. If you have your own domain, then chances are you know how to upload photos to it and find the URL. I personally use Blogger hosting for my blog and Photobucket for my pictures, so that is what I am going to cover today. 

Once the logo is uploaded to your online server, you can get the image URL. 
In Photobucket, it is pretty easy to grab. 
First, hover over the right upper corner, until a little gear appears. A drop-down menu will pop up, and you will see the option 'Get Media Links'.

 Select that, and then copy the direct link URL

Step 3: Go to My Cool Realm! They have a 'Grab my button' code generator, free to use! Enter the name of your blog, the URL of your blog, then the URL of your logo. 

Note: make sure you re-size the code box to fit your logo. The default is much too large for the standard blog side bar. 

Then you just click 'Preview', which then shows you the code box, and gives you the optio to get your code. 

Step 4: Add the HTML to your blog (for Blogger, use the HTML widget) and preview your blog, to make sure everything looks right. When another blogger grabs your blog button and posts it on their sidebar, it brings you new visitors and more followers.Your blog button has the potential to lead to great results if it looks professional, tells people what your blog is about, and can be read easily.

This is what the resulting logo and box look like on my blog. You can also see it on the left hand side bar, under my Google Friend Connect Follower box!

If you have any questions, feel free to ask in the comments and I will try to help as much as possible. What I love about this, though, is it takes the hard work out of self promotion!

No comments:

Post a Comment