How to Create a Badge

When I started making friends online thru blog hopping, I have been seeing a lot of this “square button” which says “grab my badge”. Being a newbie at that time, I have been wondering how to create those colorful and cutie square button which they actually called a Badge. I dig the web for online tutorial and thankfully I have found lots of them.

Just like me, I know there are lots of noob bloggers out there who’s rescue are online tutorials. So after successfully creating my badge thru an online guide, I thought of writing my own version of tutorial on badge making. I hope this will help the newbies out there who wants to have their own badge.

Lets get started. First, you have to create your badge image either in Adobe Photoshop, Adobe Image Ready, Adobe Illustrator or GIMP. Just set the image size to 125 x 125 pixels. As soon as you get your badge image ready, save it to your computer then upload it on your photobucket account.

Once uploaded, position your cursor on the uploaded image. It will give you an option to copy or edit the codes for this image. Copy the HTML code and paste it on an HTML Java Script adder. For wordpress user, add the widget HTML Java Script adder. And for blogger user, add the gadget HTML/Java Script. Just add your blog URL before the code to direct your readers to your blog once your badge is click.

          Your URL:  Your Image HTML      Code: 

Save it, and then check your blog. You should have something like this.

Now, to create the scrollable code, for your readers to grab, add another HTML/Java Script and place it below your badge image. Copy the code below. 

Then you should have something like this.You can edit the cols & rows on the code, according to your desired width. And you’re done. Now your badge is ready for grab.

Share Button
This entry was posted in tutorial and tagged . Bookmark the permalink.

2 Responses to How to Create a Badge

  1. Julie says:

    hi, i have been looking for tutorial on how to make a badge. Glad that I have stumbled upon this post of yours. Great!!! thanks for the info.

    Julie

  2. arcee says:

    thank you for this…i did mine already but i still need to resize the code box:)

Leave a Reply

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