Tuesday Blog Tips: How To Make Your Own Blog Buttons

I recently made my own blog buttons for my blog categories so I thought I would share how I made them so you can make your own!
The first thing I did was organise my blogger labels and pages, these are what my buttons link to so I had to make sure that all of my posts were labelled correctly with the relevant tags.

 Next, I opened up Photoshop. It doesn't matter what version of Photoshop you use because what we're doing is very basic! I'm going to select file > new, which will bring up a new canvas for us to work from.

Where you see the image dimensions, I'm going to change it from centimetres to pixels, and then set the width to match my the width of my sidebar, and then the height to, however big you want the button to be.

 So this is what we have now.

The next thing I want to do is select a colour. I obviously want one that matches the theme of my blog layout, so what I'm going to do is choose a colour I like and copy that. So let's have a look at my website, and see what colours stand out.

My blog layout is very minimalistic, but the main colour that stands out is the gold. Let's take a closer look at the sidebar.
I want my buttons to be underneath this section of the sidebar, so it's important that the buttons match the theme. I really like the gold colour and I want to use it for my buttons, however, we need the colour code. The easiest way to do that is to inspect the element. All you have to do, is hover your mouse over the colour you want to replicate, and right click and select inspect element.

When you click on this, it will bring up a lot of weird looking codes, but all that it's doing is showing all the code that makes up that particular element you've selected.

However, all we need to focus on, is the little sidebar on the right hand side.

What we need to do with this, is scroll down until we find the colour of the social media icons in my sidebar.

Once we found it, we need to make a note of that colour code because we'll need it when we go back to Photoshop.

What I'm going to do, is highlight that colour code, right click and press copy. 

Next I'm going to go back to Photoshop, and choose the colour fill on my canvas (the paint bucket tool). To choose the colour for my button, I'm simply going to paste my colour code from my website, into Photoshop.

Now that we've set the colour, we will go back to our blank canvas and click on it with the paint bucket tool, which will fill our canvas to leave it looking like this:

So now we have our blank buttons. Next thing I need is the text, I need a title for each button. I also want it to match with the theme of my website so I'm going to take another look at my website and find a font I want to use.
The font that stands out here is obviously the main header. In order to find out the font, I'm going use inspect element again.

As you can see, the font is called Lora. However, this font is not in my Photoshop library, so I have to download it. I'm just going to Google 'Lora font download', and find a font website which has a free for commercial use download link.

When you open the downloaded file, you get a few different versions of the font. 

I'm going to select regular, and double click to install it.

After you've installed a new font, you have to close Photoshop and reopen it for the font to appear in your library - make sure you save first! After reopening, I'm going to click on the text tool and you should see your new font in the drop down menu.

I'm now going to create the titles of my buttons, but I need to make sure all the font sizes are the same for each button, so I'm going to type out the longest title first, to make sure that it fits on the button, then all the other titles, will be the same font size as that one. I'm going to make the longest title as big as I can whilst it still fits in the box.

My longest title was Through The Lens, and the biggest font size I could go was 25.01, so in order to maintain consistency, I will create all of my titles in that font size. As you can see, I chose a white font. I needed to pick a colour which stands out over the gold, and although I could of chosen black, the white just fit better with the theme of my blog. Also, because I used the same font as my header, which is in all caps, I made my button title all caps aswell to match. So, all we need to do now, is save this Photoshop file as a JPEG or PNG file, and then replace the text with whatever category titles you want to display and save them all as JPEG or PNG files (obviously change the file name too so you don't overwrite each picture). So now, you should have a collection of button images ready to be used on your blog.

What we need to do now is turn these images into codes so we can use them as links. First of all, let's go to our blogger layout tab.

Next, we need to go to the sidebar and choose, add a gadget.

From the menu that pops up, scroll down until you find, add HTML/Javascipt.

You can choose to give the gadget a title, which will appear on your blog, I'm going title mine as 'Categories'. Next, in the text area I'm going to add the following code:

Next, copy and paste the url of the page you want your button to link to into where it says "URL LINK HERE".  I'm going to add my Through The Lens tag, so it will look like this. 

Now, we need an image hosting website where we can upload our photos to so we can get an image link, I'm going to use TinyPic.

We don't need to resize it because we already set the dimensions in Photoshop. Once we upload it, we just need to copy and paste the direct link for layouts.

Go back to the HTML gadget on blogger, and paste the link to the code we added earlier, into where it says "IMAGE URL HERE". In the edit window, your code should look like this:

 But when you hit save, the button should look like this in your sidebar:

So now, you can repeat this whole process until you have however many buttons you want, so that it looks like this: 

Finally, let's just take one last look at the buttons individually. The buttons above, are just screenshots from my website, but here is the actual coded button:

If you hover your mouse over it, nothing happens. Although it looks like a button, you want it to respond like a button and hover effects are a great way to encourage viewers to interact with your website.

Copy and paste the code above, into the HTML gadget on blogger, just before the button links. It should look like this:

So now in your sidebar, your buttons should have gone from this:

To this:

And there you have it! How to make your own blog buttons that match the theme of your website! I hope this post was useful, don't forget, you can make whatever shapes and coloured buttons you want in Photoshop, it's as easier as that! Let me know if you try this out or if you have any other ideas on what else you could do with Photoshop!

If you enjoyed this post, check out more Tuesday Blog Tips!

post signature