Namaskaram - salutations

Namaskaram - salutations I dedicate my blog to the enormous art lovers across the globe I love knitting so much that I have started a blog for knitting.Knitting is a job that I will like to go on.Through knitting I breathe life into many people's life. It is knitting time. When I want to relax I do it with knitting. I am a knitting buff.I love to do knitting on various topics. There is no way that you can stop me doing knitting.I am born with a flare for knitting.My face brightens once I touch the knitting needs.The electronic media has helped knitting to travel across the world.Every stitch made will talk about how knitting has influenced people.I have done some and would like to share it with you. Some patterns have been taken from free knitting sites. Some designs have been created by me. Many a times I have modified the patterns to suite my requirements. Finally I can say that I breathe knitting, I talk knitting, I walk knitting - a total knitaholic

Thank You

Thanks for visiting my blog. Your appreciations are most welcome

My sweet buddies

Monday, June 6, 2011

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.

2 comments:

Vardhini said...

Wonderful tutorial Madam. Very useful for beginners.

Vardhini
Event: Dish it Out - Spinach and Garlic
Event: Healthy Lunchbox Ideas - Broccoli

nityakalyani said...

Thanks Vardhini - yes I want as many people to create their own blog button.

LinkWithin

Related Posts Plugin for WordPress, Blogger...