Techie Tuesday:

Today's question comes from Jessica of 26 & Not Counting, "how do I create categories buttons in blogger?"

Just for a point of reference, these category buttons are found in the widget area of a blog, and often title depending on the blog's genre (i.e. Food, Lifestyle, Fashion, etc). 

Similar to the previous week, to add this functionality to your site, you will only be working in the "Gadget" area of the blogger template. 

Before you begin, there's two things you need to gather: images and links.

1. Before you create your images, you need to find out what the width of your sidebar is. To do this, you will need to have Google Chrome.

+ Go to "View" < "Developer" < "Developer Tools". Developer tools is a resource where you can find out the CSS, HTML, and Javascript specifics about your site! A sidebar should pop up either on the bottom of your browser or on the right. 

+ Click the "Magnifying Glass" on the top left. You will use this tool to highlight the section you want to find more information from.

+ I've decided to highlight the "Search" header in my widget. When I hover over it, a little yellow box pops up that says the width of this area is 250 x 33 pixels. 

+ For the purpose of this tutorial, I'm going to make full-width category images. My images are going to be 250 pixels wide, and 50 pixels tall. 

2. In Illustrator, I created these two images for "techie tuesday" category. The teal version will be the live button, and the red button will be the the hover.

3. Now, you need your link. With blogger, you can create "categories" using labels for your post. If you haven't created labels for any of your posts, you are going to have to go through manually, and update each post. With WordPress, it is very easy to batch edit them.

4. Since I want to make my category button" for my "techie tuesday" post, on my most recent "Techie Tuesday" post, I've selected the label at the bottom of the post. This will link to a separate page with the url: http://midweststylebloggers.blogspot.com/search/label/techie%20tuesdays

**If your site was created by a designer, you might have some issues here. Feel free to email me, and I can help you out.

5. Just like last week, we are going to need to upload our images to get an image URL. In a new post, upload both images. My URLS are the following:

Teal: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png

Red: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhs8bKtw9H4NBdwRyLjM5OavVdGY4HY6Vm1GBJyF5ABcf0kECKk4UyA406UZSDZl41Lu-RopOW8lLJ08D5kjBCq4JGS5OOOwxNlZ_c6M8yefZ9S4lO9tPVM1g5P362SkrHZ0gF1Ms19Bo/s1600/tt-red.png

6. Using the same structure as with the social media icons: 

<a href="LINK TO CATEGORY"><img onmouseover="this.src='HOVER IMAGE LINK'" onmouseout="this.src='LIVE BUTTON'"  src="LIVE BUTTON"/></a>

When I put in my links, it looks like this:

<a href="http://midweststylebloggers.blogspot.com/search/label/techie%20tuesdays"><img onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhs8bKtw9H4NBdwRyLjM5OavVdGY4HY6Vm1GBJyF5ABcf0kECKk4UyA406UZSDZl41Lu-RopOW8lLJ08D5kjBCq4JGS5OOOwxNlZ_c6M8yefZ9S4lO9tPVM1g5P362SkrHZ0gF1Ms19Bo/s1600/tt-red.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png'"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jO4sL_2buorALlr_LE4oeklmG-uGyF4R22ji3MGUmiHymjmDnUS47rZAbZUZXK3cZhWcrkFRacK1LBRAuu4dyKrCghMvEmNZ9h4-4KEs84LDoQEvHpWzc5SCoU8cv2fmaEIdetudiR6q/s1600/tt-teal.png"/></a>

For the rest of the categories, you would just repeat that same structure. Also, with the social media icons, I used target="_blank" after the link. This makes the link open in a new window. Since the users are just staying on my site, I want them to open the category link in the same browser tab, so I opted not to use target="_blank". It is all about personal preference. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.