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.
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:
The Image:
Do you have a test blog? If you have a test blog, try out your new button code on the sidebar of your test blog. If you don't have a test blog, go head and try adding it to your real blog. If it doesn't look right or part of it is missing, just start over fresh. It took me several attempts before I got it to work so don't worry if it doesn't work the first time.
You can use this tutorial to make a blog party button for folks to grab whenever you are hosting a blog party on your blog. Of course, you may want the image to be a bit larger for a party button.
You'll find additional blogging tips under the heading Renovations/Tuts category at the top of this blog. Just scroll down until you see "Blogging Tips and Tutorials."
Happy Blogging!
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, The Blog Fairy, made the image I use as my blog button below.
Next Step:
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.
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 at Picasa, the blog button you post on your sidebar for others to take will need to be hosted or stored some place, too.
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. If your blog is a Blogger blog, 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, too.
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.
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: Where you see the blog address for BNOTP written in red in two places, 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.
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.
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 paste" on their blog's sidebar for a quick link back to your blog.
Do you have a test blog? If you have a test blog, try out your new button code on the sidebar of your test blog. If you don't have a test blog, go head and try adding it to your real blog. If it doesn't look right or part of it is missing, just start over fresh. It took me several attempts before I got it to work so don't worry if it doesn't work the first time.
You can use this tutorial to make a blog party button for folks to grab whenever you are hosting a blog party on your blog. Of course, you may want the image to be a bit larger for a party button.
You'll find additional blogging tips under the heading Renovations/Tuts category at the top of this blog. Just scroll down until you see "Blogging Tips and Tutorials."
Happy Blogging!