"Life is not measured by the number of breaths you take but by the moments that take your breath away?"

Author: Unknown

Wednesday, December 19, 2012

How To Make a Badge For Your Blog

       If you visit many blogs, you will notice a LOT are adding badges to represent their blog with special code listed below it. This ever popular and growing trend is to allow the reader to copy the code and paste it into their own blog. This allows their readers to click on this badge and visit that block. Gradually increasing your reader base.
      The popular "Linky Parties" are a good place for these. Host a party and virtual party goers can share your badge . I am still learning about this side of blogging, and considering hosting my own someday soon.
      While considering these parties, I was trying to figure out how to get this badge with its grab code to show up on my blog. I tried several different HTML codes from several different sites, and nothing worked.That is until I stumbled upon "My Cool Realm". This site should be considered "Badges For Dummies" It couldnt have been made any easier. Just follow the steps listed to add in your blog address, url for our badge, and your website title. It worked... just look at mine on my sidebar. Here are the steps to make yours:

1. Design your badge. Most sites recommend a badge no bigger than 125 pixels x 125 pixels to easily fit others sidebar. Some say no more than 200 pixels. I found 200 a little large for my sidebar. But 125 seemed way to small for my old eyes to read, so mine is 150 pixels square.

2. Once this badge is designed, you will need some place to store it. I have read of a few different places, but photobucket seemed to be the most popular and easiest. So upload your badge.

3. Now while on photobucket, when it is uploaded you will see the pic show up below the upload box. Click on this to go to the image. On this page you will see a box to the right that looks like this:

see the box below the black box on the right? There is some URL's and HTML listed in the boxes. Click in the second box that is labeled " direct link". This will automatically copy the address for  your badge. 

4.Now go to mycoolrealm, and fill in the blanks. This address you just copied gets pasted into the box labeled: "Your Image URL". 

5. There are soem settings listed for colors and code box options below . I didnt mess with these, just left the default values, and my badge showed up just like I wanted, but feel free to experiment. You can easily re-do it if its not the way you want.

6. Now click "preview". This brings a pop-up box with your badge and a box that says something like "grab code" or similar. Click This.

7. Now this box disappears and at the bottom of the original page is a box with all your precious HTML coding to make your very own Grab Button.  Just click on "select" below this and it highlights your code. Now right click over this, and left click "copy", now we go to your blog.

8. I use blogger, so I am not real familiar with how the other blogs work. On blogger, go to "design" at the top of your blog. then to "layout". Now "add a widget" in your desired spot. Most use the sidebar. I have seen a few at the bottom.

9. Click on the tab to add HTML, and paste your code in here. be sure and click "SAVE", and your  done.

Check out your handiwork, and celebrate. A little cheering, a little dancing. Be careful....dont hurt yourself  :)


  1. Thank you for visiting and taking the time leave such a sweet compliment.

  2. Hi Tammy, I just found your blog via Garden Chef's needle and pen blog and am so glad I did! This is such a great tutorial. I'm still new to blogging so it's nice to get hints like this :) Elisabeth

    1. Thanks for stopping by Elizabeth. I had a great deal of trouble finding html that worked, until I found the above site. It couldnt be easier.