How To

UPDATED: How to Make a Blog Badge and Code Grab Box

I know there are a fair few of these tutorials kicking around on other blogs, but after Not Just a Mummy’s  post asking for help, I thought I’d show you how I make mine. All you need is a picture or design you want to use, a Photobucket account and your PC’s notepad. If you don’t have a Photobucket account, go and get one now!

1. First things first, open notepad and copy and past this in:

<a href=”PASTE YOUR PAGE URL IN HERE”_blank”>

go to the page of your blog that you want the button to point to, copy the URL from the address bar and paste it onto Notepad where it says PASTE YOUR PAGE URL IN HERE, ensuring you keep the speech marks either side.

2. Upload the photo you want to use to Photobucket (I’m using the badge for my new fortnightly fiction meme <—- cheeky plug) Once it’s uploaded, click View Album.

3. Find the picture you want in your Photobucket album and hover over it with your mouse so that the code options appear. You want IMG code, so click on it once and it’ll copy it for you automatically. Go onto your notepad file and paste the image code directly over where it says PASTE YOUR IMAGE CODE IN HERE. Once you’ve pasted it, go in and remove the highlighted bits below:

You want to delete the square brackets and everything within, making sure you don’t delete anything else around them.

4. Hey presto! This should be your completed code, I suggest pasting it into a widget and briefly publishing it to check that it’s worked.

If anyone has any questions or needs any help, just let me know, I’m more than happy to.



If you want to add a badge in your sidebar with a box for others to be able to grab your code (like my Closer to Nature one in the sidebar ——>) use the following code, obviously replacing the image URL and page URL with your info:


<a href=”PAGE URL HERE”><img src=”IMAGE URL HERE” border=”0″ alt=”NAME OF BADGE HERE” /></a><br />
<textarea cols=”20″ rows=”10″><a href=”PAGE URL HERE” target=”_blank”><img src=”IMAGE URL HERE” border=”0″ alt=”NAME OF BADGE HERE” /></a></textarea>


This should give you the perfect button and grab box to place in a sidebar 🙂

2 thoughts on “UPDATED: How to Make a Blog Badge and Code Grab Box

Leave a Reply

Your email address will not be published.