How To: Make A Blog Button With A Grab Box

  

      I am new to the blog world and I want my blog to be as functional as the next blog, right? So what can I do? Amongst other things, I want to put a blog button on my page with a grab box underneath so I can participate in linking with other peoples blogs. Well let me tell you, it is harder than it looks! After quite a few tutorials that left me with either no picture or more often, no text in the grab box, I stumbled upon a wonderful button generator where you enter just a few URL's and the title of your blog and poof! You are done! It worked like a charm the very first time. I was so happy about this and because I saw that other people were having a hard time with it too, I wanted to share with you how to get it done in no time flat! Note: These instructions are for Blogger users but I am quite sure they can be slightly adapted for other platforms such as Wordpress.  

125x125 

Step 1.)  You need to choose a picture and edit it down to the size you want your button to be. I chose 125x125 because that seems to be a pretty standard size. Once you know what the background of your button will be, you can go to various sites to scale it down to the size you want. I like PicMonkey and used this site for the purposes of this tutorial but you could also use Ribbet, or  iPiccy, or even Pixlr. With the exception of Pixlr, the other sites have a button to the left of the screen once you upload your picture and go to the edit screen that says resize. Click on that button and change your background to the desired height and width. Note: You may need to crop your picture into a square before resizing so as not to warp the image. If you do decide to use Pixlr, click the advanced edit option then simply upload your photo. Once in the editing screen, go to the top of the screen and under the Edit tab, scroll down to Select Pixels. You can then resize it to your desired height and width and make sure its correct by looking over to the top right side of the screen where it will display the numbers. Once you do that, add all the text and flourishes you think you need to represent your blog.


Step 2.)   Upload your soon to be button to a site like Photobucket or Flickr. I used Photobucket. Or even easier still, if you are on Blogger and you want to use a picture that is already on your blog, go to Picasa because that is where blogger hosts all your pictures anyway. You already have an account simply because you use Blogger! Click on your picture and you should see a set of codes off to the right side. Alright, keep that tab open because you are going to need one of those codes. For Picasa, link to this photo off to the right, which will open up a set of codes. You need the first one.


Step 3.)   Okay here is the easy part. Go to Grab My Button and fill out the title of your blog, your blogs URL address, and your image URL. You will get the image URL from Photobucket by copying and pasting the Direct Link code box. If you are using Blogger, check the Text area box. I left everything else alone but it is up to you if you want to change anything else. Click the Preview button. If everything looks okay, click the green Get Code button in the preview screen.

Step 4.)   Once you have copied the code, go to your Blogger dashboard and click on Layout. Click Add A Gadget then choose the HTML/JavaScript option. Paste the code into that box and give it a snappy title like Grab This Code or Get My Button Here. Click Save. Drag your new gadget to where you would like it to appear on your layout. Preview it and if it looks good, go back and press Save Arrangement.
 

<div align="center"> <a href="http://www.photobucket.com" title="Your Blog Name Here"><img src="http://i1299.photobucket.com/albums/ag73/SpicyPinkInspirations/tutorial125_zpsa07ef9a7.jpg" alt="Your Blog Name Here" style="border:none;" /></a></div>  

 You officially have a blog button grab box. Congratulations!