Monday, October 1, 2012

Blog Business - Topic Buttons

Pin It I've noticed lately that people are using custom "buttons" as their "topic" navigation on their blogs. It's almost like an advertisement for each section of your blog. I will admit, it's more appealing than a small line of text and a fun way to continue to stamp your blog with your brand/look. So, I'm jumping on the band wagon and designing mine! I thought it would be helpful to document each step... just in case someone out there wants to know how to do this too! :) Here goes!

Step One:
Design your buttons. I guess the sky is the limit here on what you want your buttons to look like. What I've seen out there ranges from photos, word art, decorative graphics, clipart, etc. I've also seen them all over the place... on the right hand side, on the left, on the top, on the bottom, AND mixed up through-out ads... interesting.... I guess it all depends on how you want to use these. For me... I want to use them like a navigation... and what I've learned from designing websites and blogs, is this... make everything EASY and QUICK to find. Especially your important stuff.

So, I'm designing my buttons to be fairly narrow, Large text, with a photo in the background. I want to keep these thin enough that I can stack them and have all my topics show "above the fold" (which means that they will be seen before a visitor has to scroll down on the page).

Here is my first button for my "Do It Yourself" posts: 
Designed in Photoshop
Image Size 250px wide by 108px tall
Tip: I saved the original file as a photoshop file and titled it "template". That way, I can always go back, edit the pieces on each button, or design a new one for a new topic and it will match all the others.

Step Two:
Once you have your buttons designed, "Save for web" as a png file. Now, go to your blog, (and if you have labels already designated for your posts) click on your first topic so that all the posts under that topic open. COPY THAT URL (highlight it, right click, and click on copy). Open up your blog layout (I'm using blogger) and add a Picture Gadget to your column. When the window opens, find where it says "link". Right click in that text box and click "Paste". This will put the url from your topic in this section. you can now find the button you designed that corresponds with that topic, upload it in that window and then save it. I suggest you preview your blog and the location of your button before you save the arrangement.

Step Three:
Continue adding your buttons for all your topics! Easy Peasy!

Feel free to let me know if you have any questions or if you get stuck... xoxo - Les

P.S. - If you don't have Photoshop... or... Design Skills... I'd be Happy to HELP! Just send me an email and we'll chat. :)


  1. Thanks...someday when I have some time I am really going to try this. Some of us need all the help we can get, so thanks!

  2. Hey June! No Problem! Glad to help in anyway! :D

  3. big thanks for this inspiration,I'm going to have a go!!

  4. Ok Ladies, so, I noticed that by uploading each button as it's own picture, it put a bit of space between each graphic. So, i tried a different route to see if I could get the buttons closer together. It worked. I uploaded the button graphic to flickr, and then used the image info coding in HTML along with the link. I put this information into an HTML Gadget and it WORKED beautifully! Just a heads up!