How to Make a Blog Button With Grab Box Code Underneath for Your Sidebar

Would you like to create a blog button with a grab box underneath, so your blog friends can grab your button to display on their blog?  A blog button with the button code displayed underneath is a quick way for those who read your blog to capture your blog button for their sidebar and a quick link back.


<center><a href="http://www.betweennapsontheporch.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/_x908CSKJhI4/TPp5U0929OI/AAAAAAAAU9w/dCqnDBWHD8U/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg" /></a></center>

Creating a blog button can be a bit tricky.  When I first read how to create a button with the code underneath, it took me several tries before I finally got it to work.  The directions I found back then weren't real clear.  It really isn't hard but it can be a tad confusing when you first attempt it.  I've broken it down into a few easy-to-follow steps, in case you would like to make one for your blog.

First things, first:

There are two things you must have prior to creating your blog button:

1. an image that you want to represent your blog

AND

2.  A place to “host” or store that image. 

The Image:

If you’re handy with Photoshop, Picnik (before it’s gone) or some other photo editing site (you'll find a list of them HERE) you may wish to create your own button image.  If you’re not comfortable doing that, you can have a blog/graphic designer make one for you.  Emily, of Emily White Designs, (formerly The Blog Fairy) made the image I use as my blog button below.

When making the image that will act as your blog button, you don’t want it to be too large as that will discourage folks from taking it to display on their blog.  Usually 125 x 125 jpeg is a nice size for a blog button.

A Place to Host or Store the Image:

Once you have the image/picture that will represent your blog, it will need to be hosted some place.  Just as the photos you upload to your blog are stored or hosted on a server somewhere (images on Blogger blogs are hosted at Picasa,) the blog button you post on your sidebar for others to take will need to be hosted or stored some place, too.   

If you blog on Blogger, I have found the easiest place to host images is with Picasa, since that's the same place the pictures you use on your Blogger blog are hosted.  The easiest way to have your blog button stored or hosted in Picasa is to create a “draft” post, and upload the button image to that post.  You’ll never actually “publish” the post, it will remain a “draft” post forever because there is no need to actually publish it.  You just need it stored somewhere and Picasa will do just fine.

There may be another way to host a blog button in Picasa without creating a draft post, but this way has worked well for my needs.  It’s the same place I host the Metamorphosis Monday and Tablescape Thursday party buttons.  I have one "draft" post saved in Blogger where I upload all the button images I need to host.

Important:  If you create a draft post for storing your blog button and future party buttons, make the title of the post "DON'T DELETE:  Blog and Party Buttons" or something that will prevent you from ever accidentally deleting the draft post.  If you accidentally delete the draft post, it would remove your blog button from any place it had been posted.

Next Step:

So, you've created your draft post and you've uploaded your 125 x 125 jpeg button image to it.  Now you’re ready to create the code.  Don't be intimidated...it isn't that hard.  Promise.

Here's how:

Open a word document and copy and paste all the code you see below onto the document.  You’re going to be making some changes to the code, so copying and pasting it to a word document just gives you a place to work on it.

So, let's get started.  Go ahead and copy and paste all of this code to a word document...I'll wait. 

<center><a href="http://www.betweennapsontheporch.blogspot.com/" target="_blank" title="Between Naps On the Porch"><img alt="Between Naps On the Porch" src="http://2.bp.blogspot.com/_x908CSK/XXXXXXXXX092OI/AAAAAAAAU9w/dCqnDBWHD8U/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg" /></a><center>

</center>

<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://www.betweennapsontheporch.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/_x908CSKXXXXXX0929OI/AAAAAAAAU9w/dCqnDBWHD8U/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg" /></a></center></textarea></center></center>

Okay, got that done?  Now, it’s very important that you follow the directions carefully for this process to work.  If you accidentally erase a set of quotation marks or get a character out of place, your button will not work or look as it should.  Unfortunately, with code there's not much room for error.  If you should accidentally delete something, don’t fret.  Just start over and give it another go.  

Here are the changes you'll need to make to the above code to create a button with code underneath for your blog:

Step 1:  In the two locations where you see the name of my blog, Between Naps on the Porch in purple, replace that with the name of your blog.  It’s okay to type it with spaces just as you see mine written.  Remember, you don’t want to accidentally erase the quotation marks.  

Step 2:  In the two location where you see the blog address for BNOTP written in red, replace that with your blog address.  You can copy and paste it from the address bar when you bring your blog up on your computer.  Again, don’t leave off the forward slash or any of the other parts of the address and don't add any stray marks.   Just keep referring back to the code above that represents my blog button to see if you're leaving anything out.  You just want to replace the part in red with your blog address.

Step 3:  In the two locations where you see the blue code, replace that code with the code that represents  your button image.  How do you get this?
Here’s how:
Open up the draft post where you've uploaded/stored your blog button image, just as if you were going to “edit” the post.

Flip from the “compose” view over to the “html” view.  Have you ever visited the html view of your posts?  If not, it will just look like a bunch of code...similar to the code shown below.

The code you need is the code that starts with http and ends with .jpg.   I’ve highlighted it in blue below on my image code.  Yours should be located in about the same spot on your image code in the html view.
  

<a href="http://4.bp.blogspot.com/_x908CSKJhI4/TPml6Isk04I/AAAAAAAAU5Y/gDQff530sqQ/s1600/Chair%2Bon%2Bright%2Blike%2Bheader.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5546646834268918658" src="http://4.bp.blogspot.com/_x908CSKJhI4/TPml6Isk04I/AAAAAAAAU5Y/gDQff530sqQ/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg" style="cursor: hand; display: block; height: 125px; margin: 0px auto 10px; text-align: center; width: 125px;" /></a>

Copy just that section of your image code from the html view of your draft post and paste it into the two places where you see the blue code for my blog button, replacing my code with yours.  Again, be careful to not erase the quotation marks or if you do, replace them.

That’s it…you now have the code for your blog button.  Save that word document where you can find it when you need it.    

Step 4:

Now, you just need to add all the code you’ve created to your sidebar using the “html/javascript” gadget.  Once you’ve uploaded it as a gadget to your side bar, click on "save" and it should look like this below: an image that represents YOUR blog (your blog button) and some code underneath that folks who visit your blog can copy and add to their blog's sidebar (again using the html gadget) for a quick link back to your blog.

<center><a href="http://www.betweennapsontheporch.blogspot.com/"><img border="0" src="http://2.bp.blogspot.com/_x908CSKJhI4/TPp5U0929OI/AAAAAAAAU9w/dCqnDBWHD8U/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg" /></a></center>

If for any reason your button doesn't look right or part of it is missing, just start over fresh.   Once you make one button, it's a cinch to make others.  You can use this tutorial to make a blog party button for folks to grab whenever you are hosting a party on your blog.  Of course, you may want the image to be a bit larger for a party button.

Pssst:  If you found this tutorial helpful, appreciate so much if you'll give it a +1 below. (Google +1 button is located at end of post.)  Thanks so much in advance!

Looking for more blogging tips?  Check out these posts:
14 Free Photo Editing Sites
9 Tips for Better Blog Photos
Favorite system for watermarking photos for blog
Label Photos for Pinterest
Type Accent Marks, Currency/Math Symbols & Unique Punctuation for Blog Posts

Keep Up-To-Date with BNOTP Posts:
The links below will let you subscribe to BNOPT via RSS feed, Twitter and Facebook.  Or, have BNOTP delivered right to your e-mail Inbox.