01 March 2008

How to do html code & javascript inside textbox

Today, I've made a small button introducing Bibombio.com. The button is usually 80 x 15 pixels.

Beside doing for my blog, I also stick to a post here on how to do a button of yourself and plug-in into your blog and let others embed your code too!

There are only two stage containing a few steps to be taken.

Here are the steps you should follow:

Stage 1 : Design the button
1. You can use Microsoft Paint(Go to Start->All Programs->Accessories->Paint) or u can use advanced softwares like Adobe Photoshop or Corel Paint Shop Pro.

2. Set the image/ border to 80 pixels x 15 pixels. Note : if you want to make bigger, use 80 pixels x 30 pixels so that other's button are not disturbed, making a waste of a column. But i recommend the first one.

3. Your button must be simple, usually two to four colours only. As you can see my button, I've use purple, white, yellow and black as well for the word.

4. You can decorate your button by yourself, you can put flower, animal face or etc. For me, I put Number One(1). You can guess why I am putting number one there. :p

5. After completing your design, save it, can select to .jpg, .jpeg, .png or .gif file type. Make sure you remember where you saved your file.

Stage 2 : Upload to internet
6. You can upload to Imageshack.us[Here] or Photobucket.com[Here]. Upload to Imageshack need not to be a member. But Photobucket you must be a member first before you can upload your photo.

7. For me, I use Imageshack.us.Go to Imageshack.us homepage After upload complete, copy the code from "Hotlink for websites.

8. Modify the words from the codes.
such as this as shown below

Bibombio dot com

9. Select a place from your blog to put your button and your own code. My blog, you can see my button and my code on the first sidebar.

10. To make other people copy your code and paste to their blog, you need to provide your code inside a text box to your visitors.

<textarea><a href="http://www.bibombio.com/"><img alt="Bibombio dot com" src="http://img98.imageshack.us/img98/213/bibannerek9.gif" border="0" /></a><br /></textarea>

11. Change the red colour code with yours.

12.Congratulations. See your result. If unsuccessful, repeat steps 8 to 10.

Please do me a favour, if you found this helpful, feel free to copy my code and paste it in your blog. Thank you.

No comments: