{Blog Tips} Adding badges

In my previous post I taught you how to make Headers and Badges, well now here is how to add them to sidebars and even under the header. Us geeky types like to pretend that coding is the most complex thing in the world – but you know what it doesn’t have to be.  You can make it work for you and get it to do what you want, you just need a bit of patience and confidence.

You’ll see over on my right hand side bar I have this

This is actually made up of seven images and links out to my RSS Feed, Twitter, Tumblr, Flickr, Linked in and Google Reader accounts.  Click on any of those and you can subscribe, and see what else I’m up to.  I made the little ‘Find me at’ Image but the social media buttons I downloaded from one of the thousands of sites that offers free social media buttons. I could make some but frankly it’s faffing about I don’t have time for and I like these ones they are simple and clean.

I also have this at the moment as I’m off to CyberMummy this weekend

And you know what the same code produced these images in my sidebar, I know you can use image widgets but these give you more flexibility and control as to how your site looks.

So here’s what you do:

On WordPress

1. Save the images you want to use into your wordpress media library – and leave it on the upload screen

2. Then open a new tab with your wordpress widgets in – you’ll need to go between the two tabs.

3. Open an HTML Widget

4. In the widget per image you need to put this

<a href=”INSERT THE ADDRESS OF WHERE THIS CLICKS THROUGH TO“><img src=”INSERT THE ADDRESS OF THE FILENAME FROM THE WORDPRESS UPLOAD SCREEN” /></a>

So for example mine looks like this <a href=”http://feeds.feedburner.com/co/YyUB”><img src=”http://violetposy.co.uk/wp-content/uploads/2010/01/rss.png” /></a>

5. Then if you need a space between the images insert a break and the code for that is <br>

6.  Add as many images as you need and then check they work when you save it.

On Blogger

Very similar instructions, but you’ll also need to get yourself a Photobucket account (they’re free and easy to set up)

1. Save the images you want into your photobucket account – and leave it open on the library page so you can grab the image code

2. Then open a new tab with Blogger Design page – you’ll need to go between the two tabs.

3. Open an HTML Gadget

4. In the Gadget per image you need to put this:

<a href=”INSERT THE ADDRESS OF WHERE THIS CLICKS THROUGH TO“><img src=”INSERT THE ADDRESS OF THE FILENAME FROM THE PHOTOBUCKET ACCOUNT” /></a>

So for example mine looks like this <a href=”http://cybermummy2010.blogspot.com/”><img src=”http://i580.photobucket.com/albums/ss248/violetposy/cmbadge3.jpg /></a>

5. Then if you need a space between the images insert a break and the code for that is <br>

6.  Add as many images as you need and then check they work when you save it.

Putting images under headers in Blogger

Same principle applies,  on blogger it’s dead easy just put an html widget under your header and use that – but be carefully you only put in enough to go under your header – so watch the sizes!   In WordPress it’s a lot harder and depends on your theme to be honest, so I’d give it a miss unless you are a hardened coder.  But if you want to have a go, google  your theme and ‘adding images as links’ and you should be able to find out how to do it.

Have fun with your badges 🙂

Related Posts Plugin for WordPress, Blogger...

You may also like

14 Comments

    1. It sounds like the code you are using isn’t right. Best way to check if it’s the right code is to paste it into your URL Address bar on your Internet browser and see if it works. Are you changing the code in anyway? Feel free to paste it here and I can have a look x

      1. I tried putting it in the browser but it came back item not found 🙁 the code I have put in is this:
        <img src=”http://wherethebrassbandsplay.com/wp-content/uploads/2010/06/twitter-logo-square-webtreatsetc.png” <img src=”http://wherethebrassbandsplay.com/wp-content/uploads/2010/06/facebook-logo-square-webtreatsetc.png” <img src=”http://wherethebrassbandsplay.com/wp-content/uploads/2010/06/mail-square-webtreatsetc.png”

        On my blog it just comes up with thumbnail missing symbols (you can see them down the bottom of my right column). Thanks so much for your help.

        1. I’ve edited the code and this should work, but I think your images might be too big so you might need to resize them down to say 50px x 50px. You’d forgotten the http:// at the beginning of the ‘aref’ link.

          My code tags aren’t working so will email some code to you 🙂

  1. Hi Liz,

    I have spent a while trying to use the code provided by you, and the badges just wouldn’t appear on my blog. Then I was exploring the code and there is the closing image tag > missing.

    This code is now working for me ;))))

    1. Oh bugger that’s because I messed with the code after I wrote the post – see it happens to us all!! Will change that now – thanks 🙂 xx

  2. Liz, I just wanted to ask if you could help me with the code for a scroll box, including the HTML code for my badge. The code I have will show the scroll box, but instead of displayig the HTML text, is shows the badge again. Thank you;)