Hi Tip Junkie readers! Today we’re talking about navigation buttons for your blog. My name is Kelsey and as part of Tip Junkies Blogging 101 series, Ill 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 weeks 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, lets 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, well need some sort of editing program. If you dont 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 arent wider than 200px.
Step 2: Once youve created an image that youre 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 youve logged into your account, click on Upload Images and Video and find the image that you just created and saved.
Step 4: After youve 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 codethis 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 youre uploading it to your sidebar, select an HTML/JavaScript gadget and then paste your new code into the box.
Thats 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 youve 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.
Cori says
THANK YOU! This is just what I was looking for!!!
Rachel C. says
This is amazing, I’ve been wondering how to do this very thing! Thank you, thank you, thank you. Now to actually put it into action.
Denisa says
Hi. I’ve followed your directions but do not know where to write my code. When I try to do it on the photobucket page, it won’t let me and I have no idea where else I would write it. Thanks for your time.
becca says
thank you! i just used this to create a new blog button. i really appreciate the help.
Diane @ InMyOwnStyle says
Hi Kelsey and Laurie-
You posted this tutorial at the perfect time. I have been fiddling around with creating a button and your post was just what I needed. Thanks so much. I made one – SUCCESS. Thanks Thanks Thanks
My best- Diane