How to make a badge for your blog

19 March 2016

Dear friends,

Want to make a badge for your site but not quite sure how?

I remember that feeling. I spent ages on google searching for the answer last year when I wanted to make a badge for Diary of an Imperfect Mum. I'd seen them on other blogs and thought, that's a great idea. I need one of those.

I searched and found a site (can't remember which but there were lots) that gave me a long list of code that scared me silly. I have no idea about coding. But then I came across a website that generates the code for me. How fabulous is that?

How to make a badge for your blog 

1. Design your badge 

Choose an image: Now as these badges are generally small, don't go for anything too fancy.
Use a clear font: You don't want too much on the badge and it needs to be readable.


There are many image editing apps and programs available.
PicMonkey is very popular and I have used it a lot. I also use the FontCandy app; I love this and make a lot of my titles using it as I have it on my iPad and it is super quick and easy to use, with a lot of searchable images. I also use Fotor this gives me really high quality images.

2. Resize your badge. 

Most people make their badges around 200-250 pixels wide.
It is important that it is a suitable size for people to place in their side bars, anything bigger may not fit properly.

3. Place your badge on an image hosting site. 

I use photo bucket but there are many popular ones.

Why do you need an image hosting site? 
You need to have a url for your image to make the badge.

Upload an image to the site.
Copy the url for the image.
(In photobucket you need the direct http: code shown on the right of the selected image.)

4. Generate the code for your badge.

This is the clever bit. I use Grab my button Code Generator.

You only need to add 3 pieces of information:
  • Your website title
  • The url you want the badge to link to
  • The url for your image (see number 4)
It is super easy to use!

When you have added the above information. Click preview.
If it looks ok then select to generate the code.
You can mess around with the look of the box, colours etc if you are more confident.

5. Copy the code and paste it into your site.

In blogger: go to Layout and add a gadget. 
Select add html code and paste the code in. 
You can then put the badge wherever you want it.

6. Final Tip: Save the code.

I like to paste the code into a post and save it in my drafts for future reference.

Happy badge making everyone!

I wrote this post to help any new bloggers after making the #TribalChat badge for the lovely Katie over at MummyinaTutu.

Comments are disabled. You can contact me through my social media accounts or by e-mail.
If you enjoyed this post then please share!

Latest Instagrams

©spectrum mum ~ ( 2014 - present day. Unauthorized use and/or duplication of this material without express and written permission from this site’s author is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to spectrum mum with appropriate and specific direction to the original content.
© Spectrum Mum. Design by FCD.