I finally displyed my badge code! Yay!

I was bloghopping today and doing my visiting and commenting duties and I thought, wouldn't be great to have a blog badge? When I started dabbling in the blogging world, I tried making a badge that looks like this:

But that was all to it. I've had a love-hate relationship with this badge -- I would put it in my sidebar and would take it down after a while, then would put it up again. But now that I've got a small band of followers and readers (THANKS to YOU, my friends!), I felt it has to stay in my sidebar now! Besides, some are asking for a badge exchange. It's like meeting someone for the first time and offers you a calling card and you didn't bring your own -- you know the feeling.  Another thought: it would exciting to have another blogger display my blog on their site!

Yeah, maybe I'm vain.

But just the same, I'm doing it. Maybe you can, too.

Here's how:

You will be needing an image or picture you would like to represent your site, or yourself. If your making one from scratch you'll be needing Photoshop or photoediting site such us Pixar.us. You can resize your image to whatever size you wish,  but I think the best would be 125x125.

Choose the HTML/JavaScript in the  Add a Gadget by going to the Layout page, then Page Elements.

There are 2 ways to set-up the HTML code of your button:

1. You can use Photobucket.com to upload your photo and get the html code. Copy the code where you want the button to appear in your sidebar.it would look like this:

{a href="ENTER WEBSITE HERE"}{img src="ENTER PHOTO HTML CODE HERE"/}{/a}

2. On Blogger, just open a new post, upload the resized image from your computer as if you're making an actual post. Then go to the edit HTML tab at the upper right corner and voila! copy the code and paste it in your sidebar.

Now here's the tricky part: You wouldn't want to make it hard for your friends to grab your button! You'd want the code to be "publishable" so here's how to display the badge/button code that would look like this for easy grabbing:



<br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://fickleinpink.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tG_99_0PESzrFDxdp5JSzCip5kAkUjSykLeXLqufuzZROnVfaTcMHGNd_EA4Ycg_FH2DUseMKG2U1KMLIFuid9q6NDKDkfkEEA1UxkG0rqO7TENdSw4A-u37A0vG2qRVshFgzh1PKBep/s320/free125-5jEQ.png" border="0" /></a></div><br />

{textarea rows="3" cols="17"}{br/}Paste Your Badge's HTML Code Here{br/}{/textarea}

Don't forget!!! Change { to <; AND } to >; otherwise, your widget will not work.

Change the size of your box by changing the numbers of the rows and cols on the code provided.


Done!


Now, maybe we can exchange badge, eh?

Happy weekend!