Blog Badge Maker

Phew, my last post was counted in "Adgitize", thanks..

(Please don't take this the boastful way XD)

Now, as I browse through my blog, I remembered I promised some certain bloggers for a badge, now everyone has a badge nowadays, but how can others without a vast knowledge about html codes do?

So, I'm going to make an instant "Blogcode Maker" for all bloggers out there, this is simple, but before we move on, I will explain some things in order for you to edit your own badge.

IMG insertion is pretty easy, this is the picture which I inserted and resized using html code, it should look like this.

And this should be the code for that


<center><img src="http://rds.yahoo.com/_ylt=A0S020raFKNM5hEA5nCjzbkF/SIG=13vlcvsna/EXP=1285842522/**http%3a//images2.fanpop.com/image/photos/9000000/Sawada-Tsunayoshi-katekyo-hitman-reborn-9088668-1024-768.jpg" width="200" height="200" /></center>


thats how this image came to be, using html codes instead of blogger img insertion, if you dont know what those thingy means, this is a simpler way to do it,


<center> is used for centering the umage.<br />then <img src="www.wheretheimagecamefrom.com/something.jpg" width="200" height="200"> is where the image came from, the width and height are for the image output on your blog, which you can see the image was resized as a 2x2 picture, and don't forget to close the center by puttung </center> at the end


So that's for img, and for a badge, you need to "Link" your image to your blog, which can be done by using..


<a href="www.yourblogURL.blogspot.com"></a> the /a is the one responsible for closing the link, don't forget that too


So what we need to do is use the two code and merge them together, which will go like this


<br /><center><a href="www.replacethiswithyourURL.blogspot.com"><img src="http://replacethiswithyourimagesource.com/rightclickyourimagethencopyimagelocation.jpg"></a></center><br />


Hope that helps, the center came in first so it must be closed last, take up the whole in between the quotation mark on the a href=" " with yout link, then your image must be uploaded in the net, right click your picture on the web and select "Copy image location", then paste it between the quotation mark on the img src=" ", and that's how your badge is done, and for your badge to have a text area below (for others to grab your badge) a text area can be made possible, try copying and pasting these to your website, I will use the image above and link to yahoo, just replace what's needed to be replaced and this is your badge.


<center><a href="www.yahoo.com"><img src="http://rds.yahoo.com/_ylt=A0S020raFKNM5hEA5nCjzbkF/SIG=13vlcvsna/EXP=1285842522/**http%3a//images2.fanpop.com/image/photos/9000000/Sawada-Tsunayoshi-katekyo-hitman-reborn-9088668-1024-768.jpg" width="200" height="200" /></a><br>Powered by <a href="http://onestopblogz.blogspot.com/">OneStopBlogz</a></center>


Which should look like this, try clicking the image, you will go to yahoo's homepage, just edit the code and when you click the image, it will go to the URL you inserted (that's your blog URL)



Powered by OneStopBlogz


Hope this helps, try to understand it, I know Im not good at telling these kinda stuffs XD, and for others to copy the exact link you provided, use the textarea code,


<br /><textarea rows="4" name="html" cols="50">Put your codes here and close it by using /textarea, this won't show up here because it is closing the textarea, just use it :) like how to close center,



If you do this and have a problem with it, add me up on facebook, there you can message me, and I'll message your code back to you :D

Posted in: