Flea Enterprises

blog badge tutorial

One of the most frequent questions we are asked by bloggers is “How do I make a blog badge?” 

A blog badge – a picture on your site that clicks through to another website or page inside your blog – is actually really simple to make, once you know how. They’re great to use in all sorts of ways, like:

  • As a link to a category on your blog. Why not have a themed picture that clicks to your reviews, rather than a text link in a list?
  • To show you’re a member of an online club, or community
  • To promote a special competition on your blog
  • To use as social media buttons – linking to your Twitter page, for example

So you know you want a blog badge – how do you make it?

We’ve put together a 5 minute video tutorial that demonstrates how to make a blog badge, which you can follow, or read our tutorial:

 

STEP ONE: MAKE AN IMAGE

For a blog badge, you need an image that will work well at sidebar size (no more than 200px wide). You might use a photo you already own, or a stock image. You can resize the image using Photoshop, iPhoto or Office Picture Manager, but you can also use Picmonkey, which will let you customise your image and add text, too! Be sure to look at your image carefully – will it be easy to read when it’s only 200px wide? Save the image as a JPG or PNG file.

STEP TWO: UPLOAD YOUR IMAGE

Once you have made an image, you need to upload it somewhere. If you have a self-hosted blog, you can upload the image to your own hosting, but if you don’t, then Photobucket works just as well. Photobucket also has the advantage of allowing you to host images OFF your blog – which means if your badge gets used on lots of sites, you won’t end up footing the bill for extra hosting.

STEP THREE: build YOUR HTML

Once your image is uploaded, you need to know two things. First, what is the URL of the file you just uploaded? On your blog and Photobucket, there will be a ‘file url’ which is basically a link to your picture on the Internet. On a blog, it will look something like “www.yourblog.com/wordpress/uploads/picturename.jpg”. Copy and paste this URL into a text editor such as Notepad or TextEdit (NOT Microsoft Word or any other word processor)

Next, you need to know where you’d like the image to click through to – what is the destination URL? A category on your blog, another website? Make a note of this URL and put that into your text file, too.

The really important thing to remember about HTML is that if you copy/paste it from Word, or a web page, the computer will add lots of extra little characters and tweaks that mean the code might not work. So always, always edit and write HTML code in a text programme, not a word processor or your web browser. So if you’re using the code in this post, make sure you type it yourself – copy/pasting is liable not to work!

Your badge code should look like this:

<div align = “center”>

This tells the browser that your badge will be aligned in the centre of the space available.

<a href = “put the destination URL in here”>

<img src = “put the image URL in here” alt = “add a short description here” </a> </div>

STEP FOUR: add your badge

Once your code is finished, you simply need to log into your blog and add a new TEXT widget (on WordPress) or Gadget (on Blogger). Paste the code you’ve created into the widget or gadget, save, close and – hey presto – your blog badge is now live on yout site!

BONUS: Want to Share your badge?

If you’d like people to be able to ‘grab’ your code, then you need to put the HTML you’ve made into a special box – because as we’ve explained simply copy/pasting HTML code from a web page won’t work. The code for creating a code box is actually quite complex, but there’s a nifty free utility at My Cool Realm that takes the hard work out of it! Just add in your image URL, destination URL, alt tag and press go – and the site will generate the code for you, in a code box – just add this to your blog post using the HTML view in your compose window.

 



Related Posts Plugin for WordPress, Blogger...


About 

Sally Whittle is founder of the Tots100, Foodies100, BlogSummit and the MAD Blog Awards. When she’s not working, she can be found blogging at Who’s the Mummy, or having fun with her 8 year old daughter, Flea.

3 Comments

  1. Posted 28 November 2012 at 10:16 pm | Permalink

    I’ve just done this! Thank you so much for the tutorial, really pleased with how well this worked :D

  2. Posted 16 July 2013 at 11:18 am | Permalink

    Thank you so much – I finally have a badge that works, after days of trying! I’m going to try and make a box to share the code now.

  3. Posted 19 September 2013 at 4:43 pm | Permalink

    Thank you so very much for helping me create my very first badge…ever!

    My blog is almost a year old and it’s taken me that long to build my confidence to put a badge and linky in…so thank you thank you thank you!!