how2.0 : Put "web 2.0 styles" Badges or Buttons Anywhere at Your Site Page

 

Want to put your own custom badges or buttons at your site? This web2.0 style? Just like this site [eg : pic above]? and make it linked to a site or page? Follow this easy step-by-step tutorial :

Step 1

Create your "button" or "badge" image as something like this below :

Make sure it is [*.gif] or [*.png] format because this graphic format support transparent background.[i would suggest *.png format]. Advanced user may create some simple animation too. For someone who did not know how to create it by yourself, you can use [Easy GIF Animator] or using a real time online generator sites that you can find it here. You may also download many of free badges templates [*.psd] here.

 

Step 2

Uploads your images in any image hosting service like Photobucket or Tinypic. And grab [copy] your image link.Paste the codes somewhere else as it will be used after this step.

Step 3

Copy & Paste this codes into your < body > tag [i suggest you to full back-up your template first] :

<div style='position:absolute;left:130px;top:90px;'><a href='http://www.YourLinkedPage.com'><img border='0' src='http://YourPhotoHostingServer/YourBadgeOrButton.png'/></a></div>

Step 4

[Change Links]

• change the "http://www.YourLinkedPage.com" to the address that you want the badge or button to linked to.
• change the "http://YourPhotoHostingServer/YourBadgeOrButton.png" to your grabbed image link that i was just mention before [last part of Step 2]

[Set Image Position]

< div style='position:absolute;left:130px;top:90px;' >

• "left:130px" : This is the image start position [X-axis]. You may change it to "right" if u want to start the pixel [px] position from the right. Ok. I'll give the example based on my site. "left:130px" means the image position is 130px from the left hand side of your page. So, set it to the exact px.[preview test mode is the best answer to try to view the result]
• "top:90px" : This is also the image start position [Y-axis]. I suggest u NOT to change the "top". This "top:90px" means the image position is 90px from the top side of your page. So, just change the [px] value to ur exact value.
• The example value that i've give to you is what i used in my page. Change it according to your site page

Hope you can find this useful. Good luck to all. You may asked me if you can't understand this how2.0 tutorial :)