Wednesday, February 25, 2015

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

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.

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.

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.

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.

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.

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.

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'.

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.

The box turns red for each area. So when your graphic is completely mapped, right click again and select 'get code'.

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.

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.

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.

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.