How to create a blog button with a scrolling text box below

How to create a blog button with a scrolling text box below

Hi friends , this is my version of the tutorial on how to create your own blog buttons with the text box underneath. This text box is basically consists of the details of the codes that are required for the picture and web link.I learnt this from www.e-how.com tutorial.

There are basically 2 steps involved

1. Code that needs to be created for your blog picture

2. Code that needs to be created for your html details or web links

First step: How to create your blog picture

1. Select a picture of your choice. You can choose one from the net or you can create one.

2. Save the selected picture in your computor [ my documents-pictures]

3. Please ensure that the size of the picture is 215 x 215 pixels, as the larger picture will not fit into the side bar of your blog.

4. Create an account with photo bucket.

5. Click on add a photo.

6. As soon you add the picture you will get the following details below your selected picture.

a.Email & IM: This will have the code number of the piicture and the name you have selected for the picture
http://........photobucket.com/albums/....../yourname/?action=view¤t=yournamepic.jpg

b. Direct link : This is the code number of your picture
http://i......photobucket.com/albums/your assigned number/yourname/your pictures name pic.jpg

c. HTML code: this is the code number for your  text box with reference to your blog.
as it appears in the text box it will be
....... [/center] ..........
.......[center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/a][/center][/textarea][/center]......


This is the exclusive details related to your picture

d. img code

[IMG]http://......photobucket.com/albums/ your number/your name/ypur picture name blog.jpg[/IMG]

Please use the photo bucket as it is very easy and does not involve too many detailing
So now we have created a code for your picture that you want to appear in your blog.Please save all these details in a word file as we will require them later.

Second Step: How to paste the details on to your blog
1. Open your blog page and go to design page

2. Click on to Add a new gadget.

3. Scroll down to Click on HTML/Javascript.

4. You will get a text box. This is an important step please follow carefully

a. In the title box – please type whatever you like ,something like “Get My Button” . This is the normal words that are used by other bloggers

Here 2 codes needs to be pasted

1st step . This is for your image

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/][/a][center]

In the above details please follow instructions as give, give the correct details like your web address and blog title.

2 nd step : This is related to your picture as well as your blog

[/center]
[center][textarea id="code-source" rows="3" name="code source"][center][a href="http://your web address/"][img border="0" src="http:// image web address"//][/a][center][textarea][/center]

In the above please give correct details. This is the html code of your picture.

After providing all the details please ensure that you remove all the brackets

Left side of bracket ‘[‘ needs to be replaced by <  left arrow key

Right side of the bracket ‘]’ needs to be replaced by > right arrow keys

This is an important function as computer language does not understand any brackets

Code for Adding a Blog Button with text Box Underneath for Code
When you have created and formatted the code properly (with left arrow key ; and right arrow key;),
ensure that you have replaced all the generic information with your information

Ensure that you have plugged your blog's title whereever indicated and go back and copy the image web address and paste it in the correct location.

After all your details have been provided delete or remove all of the generic information. Now your code should match to the code of the picture and the alignment must all be the same.

Now you have created a button for your blog.

Save this gadget and drag to the position where you would like it to be.
Now save all the changes
Click on View Blog.

hope this tutorial was useful. I have immense pleasure in doing so, as I feel that it costs about $15/- to create this button.