Google translator is best service ever to translate between languages with ease.
Nowadays, many websites and blogs are make use of this feature. it will help user to read website contents in their language. Google does give an option to show a banner for users for those who are not using our website's default language as their system language.
thus Google translator makes it easy for users to read and understand everything in their language.

To add Google translator service to your website or blog, follow steps below. its so simple as anything.

Go to
http://translate.google.com/manager/website/add


You will see a text field titled with Website URL. with a subtitle of What is the URL of your website.

Enter your website URL here. if you are having a sub domain and not a domain, like a blogspot.com domain,
type the address here.

Next, is Website Language
It will ask for what is the original language of your website.
so if you have a website with its contents in English language, select default language as English.
And if you have a website with contents in other language, just select that language.

Click Next.





Now you will be in plugin settings Tab.

you will see a field titled as translation languages.

select All languages, if you want to enable translation to all languages.
or if you want to enable translation to only some languages, you can select "Specific languages" option  and select languages.

Select display mode.
Three options are there

1. Vertical
2. Horizontal
3. Drop down only

When you select this option , sample of the widget displays on right side.

Under advanced title option

"Automatically display translation banner to users speaking languages other than the language of your page. "
Check this option if you want to. i recommend to check this.

If you have contents in multiple languages, then check next option "Your page contains contents in multiple languages"

If you want to, you can use Google analytic to track translation usage.

Click "next" button. you will be agreeing to Google's terms and conditions.





You are almost done, but you have to add the code to your blog or website to get it to work.

Add the first code meta code to section

It will look like this.

<meta content='e3ca32bb0a4tgtrr09d-5b78317696fryr863-g5bc9rye-15' name='google-translate-customization'/>

Aslamise.blogspot.com - Aslam's little place on the clouds! - By Muhammed Aslam C

<script type='text/JavaScript'>
var images = document.getElementsByTagName("img");
var i;
for(i = 0; i < images.length; i++) {
    images[i].className += " my-sample-class-for-all-img-tags";
}
</script>

Imagine that you have  many pre tags in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-pre-tags" to all <pre>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("pre").addClass("my-sample-class-for-all-pre-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-pre-tags" will be added to all pre tags inside the webpage.

Imagine that you have  many <code> tags in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-code-tags" to all <code>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("code").addClass("my-sample-class-for-all-code-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-code-tags" will be added to all <code> tags inside the webpage.

If you want to automate the process of adding a class called "my-sample-class-for-all-div-tags" to all <div>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("div").addClass("my-sample-class-for-all-div-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-div-tags" will be added to all div tags inside the webpage.

Imagine that you have  <button> tags in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-button-tags" to all <button>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("button").addClass("my-sample-class-for-all-button-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-button-tags" will be added to all <button> tags inside the webpage.

Imagine that you have  <input> tags in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-input-tags" to all <input>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("input").addClass("my-sample-class-for-all-input-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-input-tags" will be added to all <input> tags inside the webpage.

Imagine that you have  <textarea> tags in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-textarea-tags" to all <textarea>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("textarea").addClass("my-sample-class-for-all-textarea-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-textarea-tags" will be added to all <textarea> tags inside the webpage.

Imagine that you have  <span> tags used in your website or blog.

and you want to automate the process of adding a class called "my-sample-class-for-all-span-tags" to all <span>  tags inside the document.

Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("span").addClass("my-sample-class-for-all-span-tags");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-span-tags" will be added to all Span tags inside the webpage.

If you want to add a class to your <html> tag on pageload,Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("html").addClass("my-sample-class-for-html-tag");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-html-tag" will be added to <html> tag.

If you want to add a class to your <body> tag on pageload,Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("body").addClass("my-sample-class-for-body-tag");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-body-tag" will be added to <body> tag.

If you want to add a class to an element with specific class on pageload,Add below code just before closing body tag (</body>).

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$(".existing-class-name").addClass("my-sample-class-for-element-with-a-class-of-existing-class-name");
});
</script>

Save,and you are done.

Next time when you refresh the output page, a class named "my-sample-class-for-all-elements-with-class-of-existing-class-name-to-find" will be added to all elements which was having a "existing-class-name-to-find" class.