Blog Badge Tutorial


http://athomewithrebecka.blogspot.com/" target="_blank"><img border="0" alt="AtHomewithRebecka" src="http://i784.photobucket.com/albums/yy124/BiteMySweetTarts/limesblogbadgepic-1-1.jpg" />

After researching and using several different web site tutorials to make my food blog badges I decided to make a simple version of the steps for the technically challenged blogger, like me. 

I can tell you that making a blog badge isn't for the faint of heart but if you stick with it long enough you can master the talent.  I've made so many mistakes in the process of learning, but I am proud to say I can now make a blog badge in less than 30 minutes!

Disclaimer - I do not write HTML code. I am not an expert. I just want to share with you my way of making a blog badge.  My directions are a combination of other tutorials and my own twist on how to design a blog badge

1.  To begin, you'll need to create two new photo editing and sharing accounts....

Both are free and easy to use.

Picnic is where I begin my original design.  You can begin your design by downloaded images from the web and saving them on your computer.  I usually save my images to my desktop for easy access.  

My two most recent Blog Badge photos came from doing a Bing and Google search of Images of cartoon house clip art.  Be sure to download only the images that are public domain.  Copyright laws are very stringent and there are many sites that have links that will refer back to your use of private stock. 

2.  Upload and save your image to your new account in Picnic.  I purchased the Premium package from Picnic for a very minimal yearly fee.  It's well worth the money if you plan to design more than one or two blog badges. 

3. Along the top of your new Home Picnic page you'll see tabs titled, HOME< LIBRARY< EDIT< CREATE>SAVE AND SHARE.  Below the tabs is a large green box titled DOWNLOAD PHOTOS.
  • Click the download photos tab and follow the instructions to download the photos you saved earlier on your desktop. 
  • Click the CREATE Tab at the top of the page and start adding stickers, text etc. to create your new blog badge. 
  • When your satisfied with your design you have two choices...
  •  Click the tab, SAVE & SHARE or the Resize tab.  If you choose to save and share, title your blog badge and save the badge
  • You’ll then need to resize the badge so it will fit onto your blog and make it easier for others to take and use your blog badge on their blogs as well.  The size that works best for me is 200 x 165.  Nothing bigger than 200 x 200 is recommended .This button size works well because it fits on most blog sidebars. 
  • Save the new sized badge in place of the bigger version. Save to your desktop or My Pictures Folder on your computer.
  • If you choose to RESIZE before saving, follow the instructions on Picnic after clicking the resize tab, when you've completed this step, click SAVE & SHARE tab, save the new badge to your desktop or to My Pictures folder on your computer.
Now it's time for the Photobucket step.

Photobucket provides a code for you that can easily be altered. You can resize your blog badge in Photobucket as well.

  • Very simply, click the upload tab and upload your new badge from your computer.  After you upload your picture to Photobucket click on the image.  In the bottom, right hand corner of your screen you should see this box.
Share this photo
Email & IM
Direct link
HTML code
IMG code

1.  Right Click on the code titled "HTML Code - Websites & Blogs" and click copy.  Save the code somewhere you can alter it.  I saved it in Word.

You will now have a code that looks like this. 

<a href="http://s784.photobucket.com/albums/yy124/BiteMySweetTarts/?action=view&amp;current=limesblogbadgepic.jpg" target="_blank"><img src="http://i784.photobucket.com/albums/yy124/BiteMySweetTarts/limesblogbadgepic.jpg" border="0" alt="Photobucket"></a>

2.  Replace all the http information below with your blog URL

3.  Replace alt="Photobucket " with alt="Your site's name". 

Revised code should look like this...

<a href="http://athomewithrebecka.blogspot.com/" target="_blank"><img border="0" alt="AtHomewithRebecka" src="http://i784.photobucket.com/albums/yy124/BiteMySweetTarts/limesblogbadgepic-1-1.jpg" /></a>

REMEMBER to place all of this information in a Word document so you can easily edit.  It may take you a few tries to get it right and it's entirely too frustrating to try to recreate all the steps. 

Final step blog badge html:

  • You’ll need to create a box that will appear under your Blog Badge so that other bloggers can grab your code and place it on their sites.  The code for the box is as follows...

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">=====your code=====</textarea>
  •  Place your cursor at the end of your new blog badge code (a>) and press enter on your computer key pad then copy and past the textarea code on the new line.  This will place the box beneath your blog picture

  • Where you see the words...=====your code=====in the textarea code...delete the ===yourcode=== and enter the code you just created.

  • Your final html should look like this:
<a href="http://athomewithrebecka.blogspot.com/" target="_blank"><img border="0" alt="AtHomewithRebecka" src="http://i784.photobucket.com/albums/yy124/BiteMySweetTarts/limesblogbadgepic-1-1.jpg" /></a>
<textarea style="WIDTH: 193px; HEIGHT: 41px" wrap="VIRTUAL" cols="21" name="textarea">http://athomewithrebecka.blogspot.com/" target="_blank"><img border="0" alt="AtHomewithRebecka" src="http://i784.photobucket.com/albums/yy124/BiteMySweetTarts/limesblogbadgepic-1-1.jpg" /></a></textarea> 

SAVE your work!! 

Almost done…..Now open your blog in the DESIGN tab. 
  • Copy the new html from your saved work
  • click add a gadget,  HTML/JavaScript 
    Add third-party functionality or other code to your blog.
  • Add the new html to the widget box.
  • add a title (Take Me with You or Grab my Badge)
  • click RICH TEXT at the top of the widget box
  • Next to edit html you'll see several buttons, click on  the green circle wearing glasses, this will bring up a small box that gives the option to create a hyper link...
  • in the box titled URL...type your blog URL code...(http://yourblogurl.com)
  • SAVE
If you miss this step your blog badge will not redirect back to your site!

You should see your new blog badge photo in the gadget box with another box below that has the new html code.  You can adjust the width of the lower box in this window if it's too big.  I try to size the lower box the same size as the blog badge.

  • Click SAVE
  • You can now move the new gadget around your blog like any other added gadget.  Place the Blog Badge Gadget on your blog and save
LAST STEP!!  You've now created your new blog badge and need to check to see if the badge redirects users back to your site...

  1. Open View Blog
  2. Your new blog badge should appear wherever you choose to place it on your blog.  If you don't see the badge or it's not not fully visible you've missed a step or placed the codes incorrectly.  This is where patience becomes a virtue! Go back a retrace your steps. I know you'll find where you went wrong and be able to fix the issue.
  3. Click on your new blog badge....if a new window opens to your blogs home page then your a genius and all is well with the world! Pat yourself on the back and tell a friend!  This moment is worth celebrating.
That's it, you have now created the html code for your button and it's visible to the world.  Have fun creating different blog and blog hop badges.  It's also a fun way to create new awards to share with blogging friends.

If you have any questions feel free to leave a comment or email me.  I'll do my best to answer any questions.  rebeckaevans@comcast.net

Print Friendly and PDF


  1. Thaks Rebekah...Believe it or not I have not been able to figure out before how to do this. The ones I do have on my sidebar were done by someone else for me. I am going to copy this to put in my file of blog how tos so I can finely master thing. I really appreciate you taking the time to write this out.

    Nancy (Nann Lady Nann)

  2. So happy to help Nann!! If you have any trouble feel free to contact me!!


♥I really appreciate your comments♥


Related Posts Plugin for WordPress, Blogger...