How To Make A Shareable Badge For Your Blog

I have been meaning to make a shareable badge for my blog for yonks. Like, actual yonks. It’s one of those little tasks on my ‘Things-To-Do-To-Make-Rosalilium-Totally-Rad’ list that I just had not got round to. But today, I did it! Hoorah. Or last night rather.

You see, at the moment I am suffering a little bit from insomnia, it’s something I have been getting on a fairly regular basis for the last ten years or so. I’m used to being knackered all the time. But I do miss sleep. *head zonks out on desk*

However, my insomnia proved useful last night when I decided to make use of my wakey-time and finally whip up some blog badges. And it was actually a lot easier than I thought it would be. You simply make a badge, upload it to flickr, copy some code here, add some code there, plonk it where you want on your blog and wham-bam-thank-you-ma’am! Done.

In the spirit of sharing my achievement (and insomnia) I thought it would be nice to tell you how I did it. You know, in case you have a list and insomnia and an inclination to have a fiddle with your blog.

How to make a shareable badge for your blog

Look over at the sidebar on the left and you will see I have a few different blog badge options to choose from (you may need to scroll down a little, they are at the bottom of the second sidebar). Each one is a different size to cater for various sidebar widths. I used three different images to offer a nice choice and the code is clearly placed beneath each one. Like this:

Rosalilium Shareable Blog Badge

1. First you need to create a badge for your blog. This can be a photograph, illustration or graphic. Make sure your blog name is featured somewhere on the badge. I used photoshop to create the image above at the size I wanted it to be displayed at.

2. Upload your image to a free hosting site. I used Flickr for mine but Photobucket would also be good.

3. Grab the html code for your image and copy it onto a notepad document. In Flickr click on ‘Share’ and then click ‘Grab the HTML/BBCode’.

4. The code will look something like this:

<a href=”http://www.flickr.com/photos/rosalilium/8554503532/” title=”Blog Badge 200_100 by Rosalilium, on Flickr”><img src=”http://farm9.staticflickr.com/8228/8554503532_b0f7608f4a_m.jpg” width=”200″ height=”100″ alt=”Blog Badge 200_100″></a>

5. I removed the first part of the code to be left with just the Image Source Code, starting with <img src= . It will look like this:

<img src=”http://farm9.staticflickr.com/8228/8554503532_b0f7608f4a_m.jpg” width=”200″ height=”100″ alt=”Blog Badge 200_100″></a>

6. Next you need the code for the image to link to your blog. You replace the [ … ] with your blog url and then your image source as above (but from the http bit onwards) It looks like this:

<a href=”[blog url]“> <img src=[where your image is stored]/> </a>

And then with the code filled in it looks like this:

<a href=”https://www.elizabethdhokia.com/”> <img src=”http://farm9.staticflickr.com/8228/8554503532_b0f7608f4a_m.jpg” width=”200″ height=”100″ alt=”Rosalilium”></a>

I changed the alt= to my blog name so that this shows should the image not load properly.

7. Then you need the box that contains the link so your badge can shared elsewhere on the internet. You need this code:

<div align=”center”><form><textarea rows=”4″ cols=”24″ readonly=”readonly” >[badge code]</textarea></form></div>

It should look something like this:

<div align=”center”><form><textarea rows=”4″ cols=”24″ readonly=”readonly” ><a href=”https://www.elizabethdhokia.com/”><img src=”http://farm9.staticflickr.com/8228/8554503532_b0f7608f4a_m.jpg” width=”200″ height=”100″ alt=”Rosalilium”></a></textarea></form></div>

You can change the textarea numbers to alter the height and width of the box to suit. Mine are set at row=4 and cols=24.

8. Finally you need to add these codes to your blog in the area you want them. Mine are set in the second sidebar. Open the Widgets page on your WordPress dashboard and drag a ‘Text/Html’ box into the position you want on the sidebar. Paste the Image Code in first so that the blog badge displays on top (you can remove the link code for this just add the image). Then in another ‘Text/Html’ box add the Link Box Code.

Rosalilium Image Code

Image Link Code

And there you have it. A shareable badge for your blog for your friendly blogging pals to display on their own blogs.

Pretty rad, eh?

Let’s share the blog love. Yey!

Follow:
---

SUBSCRIBE TO FUTURE POSTS

1 Comment

  1. 16 March 2013 / 4:52 pm

    I am so NON technical, you lost me at Make.

    😀

Leave a Reply

Your email address will not be published. Required fields are marked *