Blogging 101: Navigation Buttons

Hi Tip Junkie readers!  Today we’re talking about navigation buttons for your blog.  My name is Kelsey and as part of Tip Junkie’s Blogging 101 series, I’ll be guest posting once a week about some of your blogging questions.  I design blogs at Kreated by Kelsey and am excited to be able to share some tips with you!

This week’s question:

Q: How do you make a blog button so that you can share it with others?

A: This is one of the questions I get asked most often.  First, let’s take a look at what our final product should look like. Not only will we have a button, but we will also have a text box with the HTML for others to copy and paste on their own blog.

Let’s get started!

Step 1: We need to create a button.  To do this, we’ll need some sort of editing program.  If you don’t have a purchased program such as Photoshop, there are many free options that will work great for our purposes!  My personal favorite is Gimp, but you can use anything from Picnik to your basic Paint program.

Most people create buttons that are either 200X200 or 125X125 pixels.  You can make your button whatever size you would like, but just remember that many blog sidebars aren’t wider than 200px.

Step 2: Once you’ve created an image that you’re happy with, save it to your computer as either a .jpg, .png, or .gif file.

Step 3: Now that your image is saved, we need to upload it to the internet!  I use Photobucket.  If you don’t have an account, follow their simple directions to create one.  Once you’ve logged into your account, click on “Upload Images and Video” and find the image that you just created and saved.

Step 4: After you’ve uploaded the image, click on it until you see a screen like this:

Copy the Direct Link information.  This is what I will refer to later on as the link to your image.

Step 5: The final step is to write the HTML code—this will make the text box show up so that others can take your button.  Here is the code we will use:

<center><a href="THE LINK TO YOUR BLOG GOES HERE" target="_blank"><img src="THE LINK TO YOUR IMAGE GOES HERE"/> </a></center><center><textarea><center><a href="THE LINK TO YOUR BLOG GOES HERE" target="_blank"><img src="THE LINK TO YOUR IMAGE GOES HERE"/></a></center></textarea></center>

The words in blue need to be replaced with the direct link to your blog.  For example, the link to my blog is http://www.kreatedbykelsey.blogspot.com.  The words in red need to be replaced with the link to your image which you copied in step 4.  Make sure that you use the code exactly as is.  If you delete any part of the code, including the quotation marks, it will not work.

Step 6: Now that you have the code with your information filled in, the final step is to add it to your blog sidebar (or wherever you want to use it!).  If you’re uploading it to your sidebar, select an HTML/JavaScript gadget and then paste your new code into the box.

That’s it!  Your blog button and the text box with the “copy code” will now appear on your blog.

Now everyone will be able to take your button with them and show their own readers how much they love your blog!

Good luck creating your own blog buttons this week!  I hope you’ve enjoyed this first tutorial.  Do you have a question you want answered?  Leave a comment! 🙂

P.S.  If you’re looking for ways to promote your blog, check out 31 Days to a Better Blog over on the SITSgirls Community.