Wednesday, February 25, 2015

How To: Create & Install Category Buttons on your Blogger Sidebar

DIY blog design, blogging help
When you build your blog's sidebar you want it to be engaging. It is a good idea to have some of your best content featured. When you get a reader that likes what they see you want to be able to entice them to check out older content too. And, the easier it is to get those clicks the better. I really like showcasing my favorite categories with mini clickable photos. So, today I will show you how you can do the same thing with your blogger blog.

The first thing you need to do is design your graphic. I go with the mini photos, but you could also design a graphic with just the names of your featured content. I'm going to show you how to do it with pictures.

You'll need to have the content you want to feature in mind, and a photograph to represent each saved in your pictures folder. You'll also need to know how wide your sidebar is (blogger > template > customize > adjust widths > it will say your blog dimensions).

Go to picmonkey. Open up the first photo. If it needs any editing tweaks do those now.
DIY blog design, blogging help
Click on 'crop'. Type in the dimensions you want under 'actual size' and select 'scale photo'. Adjust your box however you want your photo cropped. My sidebar is 330 so I always use 300 for any sidebar graphics I do. I have a lot of favorite content I like to list on my sidebar, so I tried to keep the height of each button pretty small. If you have fewer buttons you could go bigger.
DIY blog design, blogging help
You'll want to add what your content's name is. I added a faded rectangle using the color scheme of my blog design behind the title. Do whatever tickles your fancy. Repeat for each one of your desired content buttons.
DIY blog design, blogging help
So, you've got all your mini photo buttons designed. Now you need to merge them into one graphic. Go back to picmonkey's main page and hover over design, click custom, and type in the desired dimensions. Use the same width as all of your mini photo buttons, and then for the height add up how tall they would be stacked together and tack on a few pixels so you have some room to work with.
DIY blog design, blogging help
Once you have your blank graphic go to the 'overlay' tab (the one that looks like a butterfly), and click on 'your own' at the top. That will open up your pictures folder. Add in each of your photo buttons until you have them all.
DIY blog design, blogging help
Drag each photo button to exactly the graphic width, and then space them all out in the order you want. After the whole thing is perfect go back to the 'basic edits' tab and crop out those extra pixels you don't need. Basically you don't want any extra white at the top or bottom. Save your graphic.
DIY blog design, blogging help

Now you need to map your graphic so that it is clickable.

Go to your photobucket and upload your perfected graphic. Copy the direct link.

DIY blog design, blogging help
Go to image-maps.com and paste in your direct link in the designated box and then click 'start mapping'. When it loads click 'click to continue'.
DIY blog design, blogging help
Have all your content links handy. Right click on your graphic and select 'create rect'. Drag the box to cover the entire area you want clickable and then replace image-maps.com with the link that matches up with that particular area. For example, I dragged the box to cover my sweet sunday mini photo button and then copy pasted in my 'sweet sunday' label blog url. Click save. Repeat for every mini photo button you have.
DIY blog design, blogging help
The box turns red for each area. So when your graphic is completely mapped, right click again and select 'get code'.
DIY blog design, blogging help
If you don't see anything pop up scroll down until you get to the coding box. Click the second tab option 'html code', and then copy your code.
DIY blog design, blogging help

Now you have your graphic coded to be clickable. Time to install it onto your sidebar.

Go to your blogger homepage. Select 'layout'. Click on 'add a gadget' and then pick 'html/javascript' from the options. Paste your mapped code into the content box. You can leave the title blank. Hit save. Drag your new gadget to the proper spot and click preview to make sure everything is where it is suppose to be. Then save your arrangement.
DIY blog design, blogging help
Now open up your blog and admire your new sidebar category buttons. Click on all those links to double check that they go where you want them to go, and hover your mouse around the whole graphic to make sure all the clickable boxes are where they are suppose to be.
DIY blog design, blogging help
And, that is it you are done!

If you have any questions please don't hesitate to ask me. I'm happy to help in any way I can. I'm definitely not a graphics or coding pro, but I do like being able to do my own blog tweaking and design.

Also check out my other how to posts: How to Create & Install a Blog Button and How to Create an Inspiration Board with Picmonkey.

15 comments:

  1. Though there are only a few steps it just seems like so much! This is exactly why I think I should just hire you to give my ol' blog a facelift. :)

    ReplyDelete
  2. This is great! I loved those links when you first put them up. I need to do some updating to my site... :)

    ReplyDelete
  3. Great tutorial! Definitely going to do this...one day ;)

    ReplyDelete
  4. This is so helpful! Thank you for posting this! Always trying to improve my blog!

    ReplyDelete
  5. Yay!!!! Believe it or not I have actually wondered how you did that more than once. So exciting!

    ReplyDelete
  6. Thanks for sharing this tutorial! Definitely going to have to keep in it in mind for the future. :)

    ReplyDelete
  7. I LOVE your tutorials! I've referred back to a couple a few different times and they are so easy to follow! Totally bookmarking this for a rainy day when I have some time to do some updating!

    ReplyDelete
  8. This is wonderful! I love blog tutorials... I wonder if I could do this with Wordpress?! Will have to check it out!

    ReplyDelete
  9. This is awesome!! I've never done image-mapping, but always wondered how people make images clickable. Genius!! Thanks so much for the tutorial!

    ReplyDelete
  10. Oh my gosh... this tutorial is amazing!! I am so clueless to this kind of stuff so thank you for sharing! I can't wait to try it for myself!

    ReplyDelete
  11. Awesome tutorial, super helpful thanks for sharing!

    ReplyDelete
  12. Definitely pinning this! You are a genius Courtney! You just make it look so very easy with your tutorials! Thanks for sharing!!

    ReplyDelete
  13. What a wonderful tutorial, Courtney! I'll save this for future use! Thank you!

    ReplyDelete
  14. I've always loved your category buttons! Great tutorial, Courtney!! Pinned ;)

    ReplyDelete

Thank you for taking the time to leave a comment! I love them oh so much. I respond via email so please be sure to have your email linked. If not check back for responses via the thread.