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.
| SHARE | Tweet |
|
  « 1 |
Subscribe:
Comments
Thanks SOOOOO much!!! I have ALWAYS wanted to know how to do that. I’m so excited about this!
Yay! Both the button tutorial AND the SITS article are right up my alley! I am all about learning my way around the blogging world. Thanks Laurie for featuring these:)
Thank you so much for sharing, the steps sound easy and you were very clear on the instructions.
Oh great! thanks for this — I’ve been wanting to make a button but didn’t know how.
Thanks so much for the information. I’m always excited to learn about new elements that I can prepare myself to enhance my blog.
Love Love Love IT!! Thank you so much!
I thought I commented, but not sure where it went. So, here goes again. Thanks for the great tutorial. I will definitely be using it.
I too have always wanted to do this but always got stuck in the HTML part! Now I need to go design something! Thanks so much.
Thank you SO MUCH! This is the clearest, most concise explanation I’ve found, and I just successfully put a button on my blog for the first time. I love smart people who share their smarts!
Thanks! Going to share with my daughter…she probably already knows how to do this, but has promised to make me one and well this will be a great way to remind her LOL
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
thank you! i just used this to create a new blog button. i really appreciate the help.
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.
I have the same question!!!! where do we write the HTML code at?????? HELP!!!!
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.
THANK YOU! This is just what I was looking for!!!
Guess who just fell madly and deeply in love with you?!? ME!!! Thanks for the tip!
SunieDawn
Dysfunction In The Heartland
http://www.suniedawn.com
I can do all of it, but when I post in blogger there is an “x” where my pic goes. This was soooo easy and I thought I could do it…is it because I used flickr?
I will try this over the weekend. I need to be fully concentrated… Thanks for posting this awesome tips…
THANKS A BUNCH!!
Wow!
Brilliant
stuff!
Kelsey,
I know you posted this in July and now it’s October, but I just started a blog. I followed your instructions and everything seemed perfect, but I’m confused about where to put the HTML code. Thanks so much for your help and the easy to follow instructions! You’re a lifesaver!
Kreator Kelsey
Hi Terri!
You can put your code a couple of places. You can simply paste it into any of your posts. If you want to leave it on your blog/site permanently, then you should put it on your sidebar. If you have Blogger go to your Dashboard–>Design. Then click on “Add a Gadget”. Once on that screen, select “HTML/JavaScript” and then simply paste your code in the box and save it. Let me know if you still have questions!
-Kelsey
Blog Button
THANKS so much!!!!
Blessings from Ohio….Kim<
You must be logged in to post a comment.