Sunday

How to make a button for your blog

Back in the summer of 2012, I was fiddling with my layout and wanted to make custom social media buttons for my blog. I Googled it, found a few different tutorials and eventually bumbled my way through it. Afterwards, I was so proud of myself that I wrote my own tutorial for creating buttons and icons that, more than 3 years on, is still relevant and helpful but very, very embarrassing. It's got to the point where I'm a little reluctant to give out the link, so I figure it's high time I gave it a revamp!
Blog button tutorial

In this tutorial, we are looking at creating anything that is based around an image taking you to a link when clicked. This might be social media icons, blog buttons, sidebar ads and so on. The process is the same for all of them.
1. CREATE YOUR IMAGE
Use whatever platform you prefer to create your button/ icon/ image. Don't forget to check the pixels of the area you'll place it so you know how large to make your button. (Tip: When on your blog, right click the area you're going to use and select "inspect element" at the bottom of the menu. This will bring up a box at the bottom of your screen that tells you how large different areas of your site are. Hover your mouse over the html in the box and you'll see it highlights different areas with their size in pixels)

2. UPLOAD YOUR IMAGE
Instructions to make social media icons
For this, I use Photobucket although you could use any other photo-uploading platform you prefer. Once it's uploaded, look for the "direct link" on the right (I've pointed it out above). You'll need this later.

3. ADD TO BLOG
For the sake of this tutorial, I'm going to assume you're on Blogger and want to add your button to the sidebar. Go to Layout > Add a Gadget (wherever you want it) > HTML/ Java Script. In this box, paste the following:

Where it says "paste URL here", you want to put the URL that the button leads to. So if you want it to lead to your Twitter page, put your Twitter URL in, for example. Where it says "paste direct link here" you want to go back to Photobucket, copy the direct link I pointed out in step 2 and paste that here. 

4. YOU'RE DONE!
Hit save, check out what it looks like and give it a little test to make sure it's all working. Easy, right?

If you get stuck, just let me know and I'll help out! 

Bloglovin' // Twitter // Instagram

6 comments :

  1. Ahhh thank you! I'm still such a n00b when it comes to blogging. I'm slowly getting there though!

    Talia // Floral Anchors

    ReplyDelete
  2. Your blogging posts are so useful, thank you! x

    ReplyDelete
  3. Thank you! I've been thinking of doing a button for my blog for a while now :)

    Natalie Ann xo // Petal Poppet Blogs ♥

    ReplyDelete
  4. I have been wanting to learn how to do this for ages, thank you so much , this is awesome! :) I'm probably going to have to read it over a few times till I get it right but i'm so happy I now know how to do it! :p

    Lucy x |~ SweetIsAlwaysInStyle || Lifestyle Blog ~

    ReplyDelete
  5. Thanks for this post. So handy. Really want to make a new blog button
    Beth x
    Mermaid in Disguise

    ReplyDelete

I read all comments and appreciate every single one, even if I can't always reply. If you have a question or need a reply, feel free to tweet me @BeckyBedbug- I always reply to tweets!

Blog Design by Get Polished | Copyright Becky Craggs 2017