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.