How to create image links for blog categories

create-image-category-links

Yesterday, I added a little bit more flare to my blog. If you'll take a look at my sidebar, I no longer have textual links to all of my categories. Now, I have image links to my priority categories. 

Want to learn how I did it?

1. Pick your categories

You don't want a million categories to choose from with image links. It would take up too much space. I selected my top 6 based on what I like to talk about and the vision I have for my blog. For me, I picked fitness, food, faith, NYC, lifestyle, and blogging. 

2. Select your imagery

Pick some beautiful images that you own (you took the photo or you purchased the image) to go with each category. Edit them as you like to edit them. I just adjusted the lighting on mine a bit in Photoshop. And then I sized them down so that the width was 600 pixels (the width of the canvas I'm going to create). Make sure you select "maintain aspect ratio" when you size them down. That way they keep their integrity and don't end up warped. 

3. Create your image icons

I used Adobe Photoshop for this, but there are a number of other tools you could use to create images. I know a lot of people really like using PicMonkey. But really, since these image links will be relatively small in your sidebar, you could even create these in Word or PowerPoint and just take a screenshot. 

In Photoshop, I started by selecting File > New. And I created an image space that was 600x150 pixels. This is the canvas for your image icons. Depending on the width of your sidebar, you may want to adjust these a bit

Note: my sidebar is not 600 pixels wide. I just wanted to have really crisp images created that are sizeable if I ever change the size of my sidebar. 

I then dragged the first image into that canvas. This will crop off some of the height. Adjust the image so that it is flush to each edge and so that the main portion of the image is shown on the canvas. 

Then, I added a white rectangle using the shapes tool. I made it flush to the right side and set the transparency to 72%. 

Lastly, I added the text over the rectangle (and then had to adjust the rectangle to fit behind the text appropriately). All you have to do for that is select the rectangle layer. Then click Edit > Transform Path > Scale. That will allow you to adjust each side of the rectangle. 

Then you just have to save it!

4. Grab your category links

Using my existing category links, I right clicked each of my priority categories and opened them in a new tab. Then I saved each link to a note in Evernote (just to have them all in one place). 

5. Host your images

I uploaded each image icon into TinyPic.com. And copied the"Direct Link for Layouts" into my Evernote, pairing it with its respective category link. 

6. Create a code space in your sidebar

In Squarespace, you can just go to the style editing mode on your blog page and add a code content area. In WordPress, you would add it as a sidebar widget. 

7. Code it out

This is annoying, but it's how you have to do it so that you don't have crazy default space in between each icon (if you were to upload your image icons as images instead of as code, there would be so much space in between each one). 

Here's the code:

<a href="http://www.sweatstretcheat.com/home/?category=Fitness"><img src="http://i58.tinypic.com/wbt108.jpg"></a>
<p> 
</p>

That is the code for one image icon. You would just repeat the first two lines for each category you want (the first link in the code is your category and the second link is your image). The <p> </p> is to add a linespace in between each icon. 

And that's it!! Do your categories look awesome now? I hope so!!

Let me know if you have any questions.