How To Create A Badge For Your Blog

by - Tuesday, April 14, 2009

[Works even for WordPress]

When I started blogging, I was struggling onto how to create a badge for my other blog. I didn't know any blogging friends during those times so my only option was to Google about it. Unfortunately, I couldn't find a site which had a step by step tutorial on how to create a blog badge which made it even harder for me. So, I spent time figuring things on my own and succeeded after so many failed attempts.

For those who are puzzled, a badge is a great way to promote your blog. It's just like advertising. If a particular blogger likes your blog and wants to feature your blog to her/his site, the easiest and most effective way to do it is by displaying your blog on his page. People can also easily notice your badge which will probably increase your blog traffic.

Take for example the badge below. If you notice the badge somewhere in blogosphere and want to visit the site, you'll simply click the badge and you'll get redicted to my other blog [The Pastime Shelf] at once.





There are several ways to create a blog badge/button. Below are my three easiest ways to create a blog badge and YES ... this code also works in WordPress. Choose one from the options that you find the easiest to follow [updated as of 27 September 2010 at 3:50PM]:

-------------------------------------------------

Option 1: Simply copy and paste the provided code below on a page element [HTML/JavaSript] on your blog and edit those IN CAPS: [Dashboard > Design > Page Elements > Add A Gadget > HTML/JavaScript]



<a href="YOUR BLOG'S URL HERE" target="_blank"><img alt="" border="0" src="YOUR BADGE'S/PHOTO'S URL/DIRECT LINK HERE" /></a>


Note: If you want your badge to be in the CENTER part of the page, simply add <center> at the beginning of the code and </center> at the end. Your code then will look like this:



<center><a href="YOUR BLOG'S URL HERE" target="_blank"><img alt="" border="0" src="YOUR BADGE'S/PHOTO'S URL/DIRECT LINK HERE" /></a></center>


[If you want to show/display the code of your badge on your blog for easier sharing/grabbing, proceed to the tutorial about it here.]

-------------------------------------------------

Option 2:

    • Go to an image hosting site such as Photobucket, Imageschack, Slide or any other image hosting sites which you prefer most. [my personal choice is Photobucket as I find it easy to use]


    • On Photobucket, upload an image of your choice to serve as your badge. Resize your button. You can decorate your image if you want.


    • When you're done, save your image and NEVER delete it on your Photobucket account.

  • On a new tab/window, open your blog's DASHBOARD > DESIGN > PAGE ELEMENTS > ADD A GADGET > HTML/JAVASCRIPT. Paste this code there:



<a href="YOUR BLOG'S URL HERE" target="_blank"><img alt="" border="0" src="YOUR BADGE'S/PHOTO'S URL/DIRECT LINK HERE" /></a>


Note: If you want your badge to be in the CENTER part of the page, simply add <center> at the beginning of the code and </center> at the end so your code will look like this:



<center><a href="YOUR BLOG'S URL HERE" target="_blank"><img alt="" border="0" src="YOUR BADGE'S/PHOTO'S URL/DIRECT LINK HERE" /></a></center>


  • Go back to your saved image on Photobucket and COPY the DIRECT LINK of your image and PASTE it on the "YOUR BADGE'S/PHOTO'S URL/DIRECT LINK HERE" section on the code above.
  • CHANGE the "YOUR BLOG'S URL HERE" section to the URL of your blog.

  • Save it and you're done!
[If you want to show/display the code of your badge on your blog for easier sharing/grabbing, proceed to the tutorial about it here.]

-------------------------------------------------

Option 3:
  • Go to an image hosting site such as Photobucket, Imageschack, Slide or any other image hosting sites which you prefer most. [my personal choice is Photobucket as I find it easy to use]

  • You can either upload a photo of your choice related to your blog and/or decorate it a bit.

    Let's say for example my blog's about butterflies with a blog URL of www.butterflies.xxx.com, I will just need to go to Photobucket, upload a photo of butterflies or just decorate an empty page by using Photobucket stickers, add a boarder [optional] and then crop or resize the creation. The most common blog badge size these days is 125x125.

  • COPY the HTML CODE of your badge [Remember to NEVER delete your badge on your Photobucket account. Deleting it WON'T make your badge work]:
  • Go to the DASHBOARD > DESIGN > PAGE ELEMENTS > ADD A GADGET > HTML/JavaScript and then paste your badge's HTML code there.

  • Click the Rich Text after pasting your code as shown on the photo below:

  • You will then go to this page:

  • Follow the steps as shown on the photo above:

    1.) Click the photo of your badge
    2.) Click the Link icon
    3.) Enter the URL of your blog
    4.) Click OK
    5.) Click the Edit HTML again which will redirect you to the final page which looks like this:

  • Finally, click the Save button and you're done. You can now place the code anywhere in your blog or share it with your friends.

    Here's the badge of my experimental blog with its URL embedded on it [which will of course redirect you to a "not found" or "error page" when you click it because it's just a made up site]:
    Photobucket
NOTE: You can use the HTML code when exchanging badges with other bloggers. Whenever another blogger asks you for your badge code for badge exchange or advertisement purposes, just give him/her the HTML code that you've created [like the one on the above photo which is encircled].

If you want to show/display the code of your badge on your blog for easier sharing/grabbing, proceed to the tutorial about it here.

Enjoy your new badge!!!

... If you are having a hard time getting your badge to work, do not hesitate to contact me. Leave me a message or comment on this post. You can also e-m@il me by filling out this form. I will get to you as soon as possible.

Share
Tweet
Pin
Share
Tags : ,

You May Also Like

64 comments

  1. shy14 April 2009 at 19:37

    Yehey first to comment and first who done this badge :-D :-D Thanks for info it´s really useful at least for me :-P

    ReplyDelete
  2. Nova14 April 2009 at 20:39

    This is very much helpful and nice undertandable tips for the newbie, i find it interesting... keep it up...

    HISTORY of SUPERNOVA and SWEETPAIN
    ANGELS IN MY LIFE
    SPICES OF LIFE

    ReplyDelete
  3. maxiVelasco14 April 2009 at 21:16

    wow Shy! i saw your two badges which you created through this post! galing ah! hehe. good to know that you are enjoying the tutorials here.

    have a great day!

    ReplyDelete
  4. maxiVelasco14 April 2009 at 21:16

    thank you for coming over here Nova! yup. really great for newbies.

    see you around! :)

    ReplyDelete
  5. Bill14 April 2009 at 22:55

    Great job here Maxi congrats. Like you say when you start out there are not many people willing to help you i had to go through that same learning curve. I am still learning LOL.It nice that you would spend some of your time to help other. ;) ;) ;)

    ReplyDelete
  6. maxiVelasco15 April 2009 at 01:48

    thank you, Bill. I just thought that this is a better way to help other bloggers. it's always a good feeling to reach out to others. i am also happy that somehow, they easily understand the steps with the help of illustrated photos.

    thank you bill for being here again!!! ;)

    ReplyDelete
  7. David Funk15 April 2009 at 03:45

    Hi Maxi! Once again, another great tutorial you have here.

    I'll be honest, if it wasn't for my friend Sabre Blade and SN buddy Lester's Legends, I would have been totally lost on anything to do adding elements or features to a site when I started. Sabre who lives in the same city as me(I use him as my announcer for BWE because he's fan and I worked with him before as you've probably seen me mention), and makes solid money blogging. Lester is one of the best I've seen using PhotoShop which he can resize photos, too.

    Guys like Lester, Paul H, 3rdStone, A Frank Angle, and Mo to along with many others came from SN which was a big help to me when I started on Blogger. We have probably about 30 of us that broke out on our own with creating sites.

    Anyway, I use Photo Bucket to re-size photos and I also create text badges on Instant Banner Creator which also allows you to create banners and headers the way you want. I found that badge I use for your 10-day Followers List as well as EC on-line, then decorated with text on Instant Banner Creator. I use PB more now because of having bandwidth issues, and I don't even download any photo on my page unless it is from my PB account.

    This is a great step-by-step instruction, and glad to always see my blugger friend lending a helping hand to the community!;):)

    ReplyDelete
  8. Lynn15 April 2009 at 08:46

    another helpful tip! galeng! thank u for sharing, sis. enjoy ur week. mwahugs! :*

    ReplyDelete
  9. Cookie15 April 2009 at 12:44

    tnx for the tips maxi!! i'll try to do this

    ReplyDelete
  10. Sai15 April 2009 at 15:48

    Hi

    I am glad that you are interested in joining the contest at BloggerStop.Net

    (http://bloggerstop.net/2009/04/win-big-web-cam-and-tv-remote-at.html)

    As the contest has already started, with all the great prizes listed in the post, so make your way to the contest as soon as possible. Try to gain as many entries as possible, as the participant with maximum entries will not only win a sure prize (black leather mobile cover), but it will greatly increase the chances of winning other prizes too.
    Good luck to you.

    Regards
    Sai

    ReplyDelete
  11. maxiVelasco15 April 2009 at 23:00

    it's nice to know that you have so many friends 'd! when i started blogging, i know noone from the blogosphere. i did not even know that twinks was also onto blogging. we just found out about our sites some months ago. and i am really happy about it.

    it was so difficult for me in the beginning... noone to ask for help. but i somehow survived. hehe.

    i love your badge 'd! i promise you that! it's simple but the idea is there.

    saw another new paid post on your blog! glad to know that you are enjoying it!

    see you around again blugging 'd! :)

    ReplyDelete
  12. maxiVelasco15 April 2009 at 23:01

    welcome, Lynn! :)

    ReplyDelete
  13. maxiVelasco15 April 2009 at 23:01

    welcome cookie! my pleasure! hope you'll find the tutorial easy to follow! ;)

    ReplyDelete
  14. maxiVelasco15 April 2009 at 23:02

    hello sai!

    thanks for dropping by here and leaving me an info. will drop by your page now to check about the contest. can't wait to be there! :)

    ReplyDelete
  15. Twinks16 April 2009 at 03:04

    Hi Bru. Ui nagiging expert ka na ha. Kudos to you! :-D
    When I started blogging nobody was there to teach me too. I learned everything on my own. The advantage I had was I already know about photoshop kaya when it comes to layout designing and badges it was just like eating peanuts. LOL!

    There are many ways and tools we can use in making a banner or header. I myself prefer photoshop kasi the result is better. Tsaka now, if I design a layout I create a badge as well na din to match the entire look. You're doing great bru, you're helping other bloggers. Keep it up! ;) :* :-D

    ReplyDelete
  16. Sai16 April 2009 at 06:55

    I'll be waiting for your entry !
    Good luck to you...

    Regards
    Sai

    ReplyDelete
  17. maxiVelasco16 April 2009 at 12:51

    hello bru.. that's true. it's difficult when one doesn't know anybody to help her out with the stuffs she/he needs. buti nalang may google. gosh gosh

    about photoshop, i do not know anything about it. that's why this tutorial is for people like me who have no knowledge about photoshoping. hehe.

    take care bru!

    by the way, i've seen most of your works! galing mo nga eh. grabe! :)

    ReplyDelete
  18. maxiVelasco16 April 2009 at 12:52

    thank you Sai, i will be joining as soon as i'm done with some opps today.

    see you later sai! :)

    ReplyDelete
  19. sexy legs and body16 April 2009 at 13:53

    Hi Maxi, this info was very helpful, when next you visit my site, check out my badge, thanks for that post. Now I have one more question, how do I post the html text underneath my badge so anyone can just copy it when ever they want it? I have actually tried but have no idea how to do it.
    Thanks again for a very informative post, your step by step instructions are very easy to follow, and if I say easy, it is easy cos I am not a computer gurru... ;) Have a good one!

    ReplyDelete
  20. maxiVelasco16 April 2009 at 15:14

    thanks Colin!!! (now i remember your name... ;) ). thanks for the question for this one. i've already posted about this topic here: http://www.ovahcoffee.com/2009/04/how-to-display-your-badges-html-code-on.html

    hope you find it easy again...

    have a great day! :)

    ReplyDelete
  21. ModernMom17 April 2009 at 01:59

    HI
    I'm so glad I found your blog. I've been blogging away for a couple of months now, kind of flying by the seat of my pants, and don't really know what I'm doing. This post of your is so helpful! Have to go put the kids to bed but I'm going to start following you so I can come back and read some more!
    MM
    http://howtosurvivelifeinthesuburbs.blogspot.com/

    ReplyDelete
  22. maxiVelasco17 April 2009 at 02:07

    thank you so much modernmom for dropping by here. i am also happy that you find this blog helpful.

    i will be visiting your blog after this and will be following you as well. have a great day! ;)

    ReplyDelete
  23. Twinks17 April 2009 at 02:51

    Naks! thanks for the compliments Bru. Sa html codes lang talaga ko
    nahirapan when I started blogging. Oo nga eh good thing andyan c Mr.G to
    help us. The power of internet! hahahaha... About photoshop naman, it
    was my bro who taught me years ago pa. I didn't know it will come handy
    later on..hahaha... take care bru! mwahugs! :*:*

    ReplyDelete
  24. Alice Phua17 April 2009 at 08:44

    Thanks for this tutorial...very helpful and easy to follow! I'm glad I found this blog! Thank you very much! Do visit my blog at http://juanorandmommy.blogspot.com/ to see my badge.

    ReplyDelete
  25. maxiVelasco17 April 2009 at 13:41

    take care, too bru!!! see yah around. be right on your blog after this! mwah

    ReplyDelete
  26. maxiVelasco17 April 2009 at 14:00

    i saw your badge and i am so touched! with your baby on your badge... so cute! hihi. love it.

    thank you for finding the tutorial easy to follow. i really appreciate the kind words you've left me here.

    followed your blog, too! see you around more!

    ReplyDelete
  27. wine specialist21 April 2009 at 17:26

    :) Absolutely, positively AWESOME. I am a newbie and learning how to use code, snippets, etc. Have been trying to create a bade for weeks and this is the first step by step guide for dummies like me that has really been easy to understand and use.

    Thank you so much

    ReplyDelete
  28. maxiVelasco22 April 2009 at 21:58

    nice to know that you find the tutorial easy to understand Wine Specialist. thanks for the appreciation! ;)

    ReplyDelete
  29. Shirleyone @ cardartetc.blogspot.com17 January 2010 at 18:13

    8-)Gigantic hugs. I searched high and low to find out how to do this. Thanks so very much. I actually had to drag my cursor over the widget "blinkie" before entering the url, but so what, it is wonderful!!!!!

    Hugs and free shoe shine if you are ever in Kannapolis, NC.

    Shirley :)

    ReplyDelete
  30. MaxiVelasco17 January 2010 at 23:01

    Hello Shirley! You are very much welcome. I am so glad to help.

    Have a nice day. :)

    ReplyDelete
  31. Leah17 February 2010 at 01:00

    oh my gosh! thank you SOOOO MUCH for this tutorial!!!

    ReplyDelete
  32. MaxiVelasco17 February 2010 at 07:14

    You are very much welcome. Have fun!

    ReplyDelete
  33. Anonymous28 March 2010 at 21:17

    Thank you for sharing this...really useful. I've been wondering how to do this for a while, and now I know. Thanks!

    ReplyDelete
  34. MaxiVelasco13 April 2010 at 22:41

    You are very much welcome. I am glad to help. Have a nice day.

    ReplyDelete
  35. LadyJava20 April 2010 at 11:20

    Great post Maxi!

    ReplyDelete
  36. MaxiVelasco21 April 2010 at 23:07

    Thanks a lot LJ. I need to update this post though...

    ReplyDelete
  37. shelley2 May 2010 at 17:55

    this is a very helpful tips for my blog http://letsgotoshelley.blogspot.com/
    thanks alot....
    anyway I have follow your blog :) :) :)

    ReplyDelete
  38. MaxiVelasco27 May 2010 at 12:54

    Welcome Shelley. Glad to help.

    ReplyDelete
  39. Andy@nike air jordan10 June 2010 at 17:09

    Hi, Very helpful post. You're correct its one way to increase traffic on your site. I would surely create my own badge on my nike air jordan site. Salamat sa info...

    ReplyDelete
  40. Rebecka9 September 2010 at 01:48

    Thank you soooo much! I really needed this and you've made it so easy to follow! :-D

    ReplyDelete
  41. MaxiVelasco9 September 2010 at 17:05

    Thank you Rebecka for the kind words. I am glad that it has helped you. Have a great day! :) :) :)

    ReplyDelete
  42. Angie18 September 2010 at 14:45

    Ang galing mo sis...Tagal ko ng may blog ngayon pa ako nakagawa ng badge dahil sa post mo na ito...Thank you Sis....^_^
    GOD BLESS....^_^

    ReplyDelete
  43. MaxiVelasco23 September 2010 at 00:01

    Hello Angie! Tagal ko ng pinost ito. Ina-update ko lang from time to time kapag may nakita akong new method.  I am glad to help. Have a great day Angie! :-D

    ReplyDelete
  44. MaxiVelasco1 October 2010 at 23:42

    Thank you for the comment. I really appreciate it a lot. I am always happy to help. :-D

    ReplyDelete
  45. jareds mum3 October 2010 at 23:18

    hey there, i really like this tutorial and i think i am now ready to create my badge problem is i don't know where to look for nice drawings or illustration for my badge...i've tried googling but all that's coming up are unfree sites...please help..thanks..btw, love your blog an i am now a follower, keep it up :) hopefully you can check out my blog to
    http://jaredslittlecorneroftheworld.blogspot.com

    thanks!

    ReplyDelete
  46. MaxiVelasco4 October 2010 at 00:16

    Hello Jared's mom/Vix!

    I know what you mean about unfree sites.  I've sent you an email on your gmail account.  I hope that you get to read that anytime soon.  Please get back to me so I will know if everything's working or not.

    Have a great Monday!

    By the way, I've been to your blog and have followed you, too.  Have a nice day!

    ReplyDelete
  47. ashleigh31 October 2010 at 13:37

    Thanks so much! This is a great post - it really helped me :)  

    ReplyDelete
  48. Ciarabear1015 November 2010 at 12:33

    THANK YOU SOOOOOO  MUCH!!!!!!!!!! I've been looking everywhere and couldn't figure it out! Thanks a ton!!!!! :)

    ReplyDelete
  49. MaxiVelasco25 December 2010 at 20:28

    You are very much welcome. I am so glad to help. :)

    ReplyDelete
  50. MaxiVelasco25 December 2010 at 20:29

    You are so w :-D elcome. It feels good to know that I've been able to help you figure it out.  Have a great day. 

    ReplyDelete
  51. Veronica24 January 2011 at 08:36

    Hi,

    This is very helpful, I'm doing good until i upload my badge in my blog. I cant click the picture so that I can put my url. hope you can help me. :)

    ReplyDelete
  52. MaxiVelasco24 January 2011 at 12:40

    Hello Veronica. Please let me know the URL of your blog so I can check it out and help :)

    ReplyDelete
  53. MaxiVelasco27 January 2011 at 15:25

    Received your comment on how to display your badge's HTML... seems everything's doing great now, right?  Let me know if there are still issues. ;)

    ReplyDelete
  54. Kelli27 May 2011 at 22:00

    Thanks so much for this tutorial! I'm hooked on creating badges now :)

    ReplyDelete
  55. MaxiVelasco4 June 2011 at 17:34

    Hello Kelli. Nice to know that the tutorial has helped you :)

    ReplyDelete
  56. MaxiVelasco4 June 2011 at 17:42

    Thanks George. Not sure how to answer the question regarding the PR but thanks for finding this blog nice :) Have a great day :)

    ReplyDelete
  57. Jane25 June 2011 at 21:38

    Thank you for the clearest instructions on the internet, you have no idea how long I have been trying to learn how to make a badge. Thanks again

    ReplyDelete
  58. Mariuca26 June 2011 at 12:32

    :* :* :* :*

    ReplyDelete
  59. Mariuca26 June 2011 at 12:33

    Me too using photobucket! yay me commenting on ur ancient post ha h a! Happy sunday!

    ReplyDelete
  60. MaxiVelasco30 June 2011 at 12:47

    You are very welcome, Jane. It's a great feeling to have been able to help in any way. Hugs!

    ReplyDelete
  61. MaxiVelasco30 June 2011 at 12:48

    Thanks for the kisses Marzie. Kisses back! :*

    ReplyDelete
  62. MaxiVelasco30 June 2011 at 12:49

    I now rarely use photobucket but I still do :)

    Haha. yes, you're commenting on a very old blog post but thank you very much!

    ReplyDelete
  63. Cyber Community18 September 2011 at 17:22

    This is very good tutorial yet easy to do. thank you!

    ReplyDelete
  64. MaxiVelasco25 September 2011 at 12:33

    Thank you very much.  NIce to know that it has helped you :) Have a great day :)

    ReplyDelete

Thank you for dropping by and sharing some love! You're lovely!

Maxi
Ovah Coffee
Homeaholic
Travels and Wish Lists