By now you guys know that this isn’t a blog about blogging, but every time I learn something new about blogging (usually invloving HTML code) I like to share it. If you are visiting for the first time, I also have a tutorial about how to add custom social media icons to your blog as well as how to add custom feedburner/RSS icons.

 

I recently helped A Day in the Life of a Surfer Wife make a button with a grab box for her blog, which turned out to be a learning experience for both of us. I even found a way to fix the wonky button I had made for The Little Hen House a few months ago. It took a lot of trial and error to get both of the blog buttons right, and there was a lot of conflicting information out on the internet.

 

I was so frustrated with the tutorials I found online that I decided to make my own. Here are the most basic instructions I can provide on how to make a blog button with a grab box for your blog. I’m sure there are different ways to do it, but this is what worked for me. Let’s get started!

 

How to Make a Blog Button with a Grab Box

 

Step 1: Decorate and size the image you want to use for your button.

 

I use Photobucket to do this. It’s free. Open an account and upload the image you want to use.

 

Helpful tip: Keep in mind that the blog button is going to be a perfect square. I find it helpful to crop my image as close to a square as possible before I start working with it. This helps me stay within the boundaries and get a better visual of the end result.

 

Once your image has been cropped, you can add effects, letters, fonts, borders, icons- whatever design pleases you. Photobucket has a lot of different options and I highly recommend playing around with a few looks until you find something you are happy with. Try to make a button that is representative of your blog and will catch a reader’s eye. Using a graphic or photo from your blog, as well as the same color scheme, is a great way to keep everything consistent.

 

Helpful tip: Make sure you have the name of your blog somewhere on the image and it should be easy to read. The image is eventually going to be pretty small, so you want to make sure your blog name stands out. If the lettering doesn’t stand out on its own, you can try to add a text box with a colored or white background to make it easier to read. You can see examples of this in the photos at the top of this post.

 

After you get the image to look the way you want you want to save a copy of the image. Then you need to re-size it. The standard is 125 x 125. Some people use 150 x 150. My button is 125 x 125 if that helps you get a visual. Save a copy of the re-sized image as well. So, you should have three images: the original, a decorated one in the same size, and a decorated one in the small size. Having copies of the original and large sized images will help you make changes in the future so you won’t have to start from scratch.

 

Now that your image has been decorated and re-sized it is officially ready to be put to use.

 

For Blogger users ONLY: Once the image is saved, Photobucket will provide you with the direct link to your image. You will need this later. Write it down, save it on a Word document, or keep the internet window open.

 

For WordPress users ONLY: Save your Photobucket blog button image onto your computer. Go to your dashboard. Under “Media” on the left hand column click on “Add New”. Upload the blog button. Once the image has been uploaded, WordPress will provide you with the “File URL”. You will need this later. Write it down or save it to a Word document.

 

Step 2: Adding a widget.

 

I use WordPress, so I’m going to use WordPress language, but I know that all you Blogger users will be able to adjust as needed. Go to your dashboard, then look under “appearance” in the column on the left hand side of the screen and click on “widgets”. There you will find a list of WordPress widgets. Find the “text” widget for arbitrary text/HTML. Click on the “text” widget and drag it over to your sidebar on the right where all your other widgets go.

 

Step 3: Writing the code.

 

This is the part that always gets me. One little mistake and I have to go back and write it all over again. It can be maddening.

 

Helpful tip: I find working with the code on a Word document really helps me fix mistakes and it gives me a nice, clean space to work with.

 

I’m going to give you two different codes: one for WordPress and one for Blogger. You will need to take these codes and fill in the appropriate information for your image and blog.

 

WordPress Blog Button with Grab Box HTML Code

 

[div align="center"][a href="http://www.YOURBLOG.com" target="_blank"][img src="http://YOURIMAGEURL"][/a][/div]

[div align="center"][form][textarea rows="3" cols="19" readonly="readonly"][a href="http://YOURBLOGL.com" target="_blank"][img src="http://YOURIMAGEURL"][/textarea][/form][/div]

 

YOUR BLOG= The URL for your blog.

YOUR IMAGE URL= The image URL from WordPress that I had you write down earlier.

 

YOU MUST REPLACE ALL THE BRACKETS IN THE CODE WITH < > ie: [ = < and  ] = >

 

Input the appropriate information into the HTML code. Put the code in your text widget. The spacing needs to be the same. Click “save” and then “close”. Go to the homepage of your blog and you should see it there in all its glory. If it doesn’t look right, start over with the code. Double check the image URL. Double check everything.

 

Blogger Blog Button with Grab Box HTML Code

 
[center][img src="PHOTOBUCKETIMAGELINK"/][br/][br/][textarea style="width: 129px; height: 129px; overflow: scroll;"]

 

YOU MUST REPLACE ALL THE BRACKETS IN THE CODE WITH <> ie: [ = < and ] = >

 

Helpful Tip: in the code where it says “BLOG TITLE” enter the name of your blog with spaces. If I were doing it, it would look like this: “The Little Hen House”. Also, the / after BLOGURL needs to be there.

 

Once the appropriate information has been inputted into the HTML code put the entire code into the text widget. Save it and go to your blog homepage. If the blog button and grab box doesn’t look right then you will need to start over. Double check your Photobucket direct link.

 

Helpful tip: This works for both codes- anywhere you see the word “center” you can replace it with “left” or “right” to adjust the alignment. For example, I replaced “center” with “left” and now my button is aligned to the left of my sidebar.

 

THE END

 

That’s it everyone! Hopefully you haven’t all pulled your hair out, or smashed your computer with a hammer. You all should have beautiful blog buttons with grab boxes adorning your brilliant blogs.