How to make a badge for your blog.

Monday - August 13, 2012 

All bloggers what to promote their blog and one of the best ways is to have a badge so other bloggers can share you. Creating a badge doesn't have to be difficult. Here is one I made for my mom's blog:

First you need to design a badge: find a background, use your blog name, you know get creative! The best button size is 125 px X 125 px as it works well with most blog sidebars. You can do it either on Photoshop if you have and know how to use it. OR I found this web site that lets you create for free - http://www.onlinelogomaker.com/. Once you have saved the badge to your computer, your going to need it to be hosted somewhere on the web, the best place is PhotoBucket. Create an account, it's free and easy. Upload the image you saved and grab the HTML code.

It looks like this:

Go to where ever you want your badge to be and paste it in the HTML section. You will now have a code that looks like this.

<a href="http://s1245.photobucket.com/albums/gg583/adventureintodomesticland/?action=view&amp;current=37aed42e.png" target="_blank"><img src="http://i1245.photobucket.com/albums/gg583/adventureintodomesticland/37aed42e.png" border="0" alt="Photobucket"></a>

Now replace the yellow highlighted area with the web address you want your button to link to. Which I'm guessing would be your blog's web address.

Next replace alt="Photobucket" with atl="Your site's name". This is the wording that appears when you hover over a picture. That's it, you have now created the html code for your button.

Now that you have a badge, you want to create a "Grab my Badge" so other bloggers can link back to your site.This is very easy to do as well.

A "Grab my Badge" looks like this:

  Grab my Badge

<br /> <a href="http://www.abitofserendipity.blogspot.com/" target="_blank"><img src="http://i1245.photobucket.com/albums/gg583/adventureintodomesticland/37aed42e.png" border="0" alt="A bit of Serendipity" /></a><br />

 Here is the code you will need for that:

<div align=center>
<h2>Grab my Badge</h2>
<img src="HTML Code from Photobucket" alt="Your site name" />
<textarea rows=”3″ cols=”10″>
<a href=”HTTP://www.YouWebSiteAddress.com“><img src="Same HTML code from Photobucket" border="0" alt="Your site name" /></a>
</textarea>
</div>  

The green highlighted areas are the code from your badge from above. Change the blue highlighted area to your information. Take this code and place it in a HTML box on one of your sidebars and your good to go!

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

Thanks for sharing another adventure with me!

Like it? Love it? Please share it!