Amazing Blogger Tricks

The Google Translate Widget on Blogger provides an extra feature to your blog using which the visitors can translate the blog in their own language. It's always a good practice to add Translate widget to your blog as the blog can be viewed by any one across the globe. Adding a Translate widget to blogger would help in getting more number of visitors and there by more traffic.

Let us see the the process of adding a Translate widget to Blogger.

Blogger provides a basic translate widget which is very simple to use and supports many number of languages. If you want to add the translate widget that the blogger provides, follow the steps mentioned below.

1. Go to: Dashboard -> Layout -> Add Gadget

2. Select "Translate" widget from the list of blogger widgets.

3. Select any one of the options provided for the type of Translate widget. Then click Save.

4. The Translate widget should have got added to the blog layout as shown below.

5. Click "Save Arrangements" to save the blog layout and View blog to see the Translate widget added.

The Translate widget is successfully added to Blogger. Select different languages from the Translate widget drop down menu and verify if it works.

The Translate widget added above is a basic one that is provided by Blogger. If you are looking for an attractive Translate widget then you need to get the HTML code for the widget which needs to be added to the blog using HTML/JavaScript widget.

================

Let us see how we can add an attractive Translate widget that supports 12 different languages.
The widget supports: English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic and Chinese languages.

1. Go to: Dashboard ->Template -> Add Gadget -> HTML/JavaScript

2. Add the below code to the content area.

<style>

.google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }

.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
color: #0880C4;}

a.showLink:hover, a.hideLink:hover {
color: #0880C4;
 }

</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq29UafCaWZJ4vE-vqjtzSdDAWUYiqL8qjXsB0SJJWtBRJMt5v8UMIAhqC_peWU6u0oIHyM0CUayy3OIBfyqpHO_zSwS5VwvGXH4Lk3TKXSWmurEXwWij8Kj2OtCvTaFuXauEwhDjm3r__/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p>
<a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide / </a><a href="http://helplogger.blogspot.com"><font size="1px">Get this widget</font></a></p>
</div>
</div>

3. Click "Save Arrangement" and View blog to see the Translate widget added to the blog.

The attractive translate widget is added to the blog.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.