After so long time, i back to my original passion of creating blogger widgets and playing with codding, and today’s tutorial i will share a new and stylish blogger widget “Google Language Translator” which must be implemented into your blog so, that your non-English speaking visitors can read your articles too using the Google language translator.

However, the same widget also provided by the Google at Google gadget which working great as well as it supports all languages. but when it comes to the look, i will say i don’t like the look of that gadget as it looks too simple and non-stylish. There isn’t any update since it created once. it should be updated time to time, as now almost websites and blogs designs updated with the trendy features of HTML5, CSS3 and jQuery.

Related : Spraying animated subscription buttons widget for blogger

Also you can find the same widget on different blogger widget niche blog’s with the different codding and style. somewhere , you might find Google translator widget with flags or anything different. but here i comes with an another stylish Google translation widget for blogger even you can add this widget to any other platform like WordPress or any HTML page. So, let’s move to the tutorial of how you can integrate this widget into your blog.

Before go for the tutorial see the animated screenshot below to know hows it works and its look.
New jQuery Google Language Translator Widget for BloggerI created above animated GIF using Camtasia Studio if you would like to have this type of animated GIF on your blog to show the example of any stuff you share on your blog to your readers then you should read the full tutorial of how to create animated GIF using camtasia studio.

As you can see the animated pic above, there isn’t any color implemented to the link text so, that comes with default blue color. ( when we leave any link text without CSS then it will be take the web default blue color automatically ) so, when you add this widget to your blog then links color will be changed to your blog’s links color which chooses by you or your blog designer or if you want to give different color than your blog’s link colors to this widget’s links then you can do it easily by editing the CSS code provided in tutorial below.

This widget let’s your readers to select language from the 18 countries however, it showing less countries than other Google language translator widgets but you don’t need to worry about it. because of more countries selection will be displayed by the Google translation itself, when user choose any of country from these 18 countries. for the more information about this widget you should go to the HTML editor and see the live demo by placing below code into it.

How to add this widget ?
it is simple to get installed this widget to your blog. firstly, go to blogger dashboard > Template > Edit HTML and get ready to follow the 3 simple steps below.

1

The jQuery Plugin
This widget works based on jQuery. so, your blog must have jQuery plugin installed otherwise it wont work. if you have already installed the jQuery plugin then ignore this step or here is the jQuery plugin that you have to add after <head> tag in your blog.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
2

The CSS
Here is CSS code that you can use to copy and paste. simply search for the ]]></b:skin> and place the CSS code below just above it.

#lng{cursor:pointer;height:37px;line-height:37px;margin:0;top:22px;margin-left:40px;border-radius:2px;position:absolute;z-index:999;right:20px;font-size:13px;padding:7px 40px 5px 5px;color:#666;text-align:right;transition:all 200ms ease-in-out 0s}
#lng_open{background-color:#FFF;color:#999;width:400px;box-shadow:0 0 3px #666;padding:5px 20px 0;position:absolute;right:20px;top:22px;z-index:1000;border-radius:4px;display:none}
#lng_open #select{padding:0 0 0 20px;font-size:15px;height:38px;line-height:38px;border-bottom:1px solid #E8E8E8;color:#7D7D80;cursor:pointer}
#lng_open .dropdown{float:right;margin-right:10px;display:inline-block}
#lng .dropdown,#lng_open .dropdown{font-size:17px;margin-left:7px}
#lng .icon,#lng_open .icon{display:inline-block;background:url(http://4.bp.blogspot.com/-5GIexi17Pqk/UxL9siFFzdI/AAAAAAAAMhw/wb456XSAxOM/s1600/lang.png) no-repeat scroll 0 -24px transparent;width:23px;height:24px;margin:4px 7px 6px 0;vertical-align:middle}
#more,#popular{padding:10px 0 10px 20px;font-size:.9em;border-bottom:1px solid #DEDEDE}
#lng_open li{list-style-type:none;float:left;width:33%;padding:2px 0}.clear{clear:both}
3

The Javascript
Ok, Where you would like to show this widget? copy and paste below code there. ( read the placement tips below )

<script type="text/javascript">
var burl ="<data:blog.url/>";
</script>
<script type="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/blogger_translate_widget_2014.js"></script>

Finally, save your Template and you’re done. ! but don’t forget read the placement tips and recommendation below.

When you place this widget to your blog by following above steps it will be display to the right side of the page or inside the DIV you chooses. that you can simply change according to your need by editing into the first line of CSS code ( #lng{….} ) but the default CSS will be useful as well.  It will be look awesome, if you add the last javascript code into the Div or Nav of menubar of your blog. OR after the <body> tag in your blog. These 2 place in the default CSS are recommended.

Well, if you want to integrate this widget to the any single HTML page (Not to blogger) then you can change the <data:blog.url/> In third step of Javascript, with the URL of your HTML page. after the editing it should be look like this :

<script type="text/javascript">
var burl ="http://www.example.com";
</script>
<script type="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/blogger_translate_widget_2014.js"></script>

If you have any questions related to this widget you can feel free to ask by joining the discuss here. ( Registration not required ) Then you will get the best answer by me or any other community members. :)