Thanks for stopping by the porch! Stay in touch and never miss a post. *Subscribe for RSS updates, HERE. *Subscribe to receive an e-mail notice when a new post is up, HERE. *Subscribe to the BNOTP newsletter, Postcards from the Porch, HERE. Please note: All of the above are completely FREE! :)
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 to display on their sidebar, giving them a quick link back to your blog.
Creating a blog button can be a bit tricky. When I first learned 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 were not real clear. It really isn’t hard but it can be 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 you want to represent your blog
2. A place to “host” or store that image.
If you’re handy with Photoshop or some other photo editing site (you’ll find a list of them HERE) you may wish to create your own button image.
When making the image that will act as your blog button, you don’t want it to be too large because that could discourage folks from taking it to display on their blog or sidebar. Usually 125 x 125 pixel image 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.
You can also upload/host your button image with Photobucket but after the button has been taken and placed on a lot of sidebars, you’ll get a notice that you’ve exceeded your bandwidth/storage space with them and they will start billing you. I know because it happened to me. That’s why I store my button images in a draft post with my blog host now.
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.
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.
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><textarea id=”code-source” rows=”3″ name=”code-source”><center><a href=”YourBlogAddress“><img border=”0″ src=”http://2.bp.blogspot.com/_x908CSKXXXXXX0929OI/AAAAAAAAU9w/dCqnDBWHD8U/s400/Chair%2Bon%2Bright%2Blike%2Bheader.jpg“ /></a></center></textarea></center></center>
IMPORTANT: I’m also showing my code below because WordPress does weird stuff and turns the quotation marks backwards when you copy code in to the Visual side of a post. When you copy and paste the code above, you’ll see quotation marks going backwards. Arrggg. So, click on the picture below to enlarge it for a better view and make sure your quotation marks in your code are turned the same way as what you see below.
Okay, got that done? Now, it’s very important to 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 locations 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?
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 and is located in the lower part of the image code. I’ve highlighted it in blue below on my image code so you can about where you’ll find it in your image code. (Note: there are two sections in the the image code that start with http and end with jpg. You want the second one…see where I’ve highlighted in blue below.)
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.
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.
Hope you found this tutorial helpful!