Nice Translation Widget For Blogger Blog

The Google Translation Widget Looks Ugly In My Opinion(screenshot). Because Of The Bottom Right Aligned Gadget Powered By Google Text Link. So Its Time To Have A Modified Google Translation Widget For Your Blogger Blog. It Looks Nice And Simple.
This Widget Works With The Extracted Codes From The Google Translation Widget. Therefore The Output You Gets From Both Of The Widgets Will Be Same. Click To See The Example

Lets Start The Widget Installation...

* Go To The Layout Section Of Your Blogger Blog, And Select Edit HTML , Check Expand Widget Templates Is Ticked

note: For Backing Up Your Current Code Click Download Full Template On The Backup/Restore Template Section.

* Then Search For The Code </b:widget> , If You Are On Firefox Just Press Ctrl+F For Finding The Code. Then Add The Following Code Just Below </b:widget>
<b:widget id="'HTML200'" locked="'false'" title="'Language" type="'HTML'"><br /><b:includable id="'main'"><br /><!-- only display title if it's non-empty --><br /><b:if cond="'data:title"><br /><h2 class="'title'"><data:title/></h2><br /></b:if><br /><div class="'widget-content'"><br /><form action="'http://translate.google.com/translate_c?'"><br /><table id="'webtb'"><br /><tr><td> <select name="'tl'" style="'width:"><br /><option value="'ar'">Arabic</option><br /><option value="'bg'">Bulgarian</option><br /><option value="'ca'">Catalan</option><br /><option value="'zh-cn'">Chinese (Simplified)</option><br /><option value="'zh-tw'">Chinese (Traditional)</option><br /><option value="'hr'">Croatian</option><br /><option value="'cs'">Czech</option><br /><option value="'da'">Danish</option><br /><option value="'nl'">Dutch</option><br /><option value="'en'">English</option><br /><option value="'tl'">Filipino</option><br /><option value="'fi'">Finnish</option><br /><option value="'fr'">French</option><br /><option value="'de'">German</option><br /><option value="'el'">Greek</option><br /><option value="'iw'">Hebrew</option><br /><option value="'hi'">Hindi</option><br /><option value="'id'">Indonesian</option><br /><option value="'it'">Italian</option><br /><option value="'ja'">Japanese</option><br /><option value="'ko'">Korean</option><br /><option value="'lv'">Latvian</option><br /><option value="'lt'">Lithuanian</option><br /><option value="'no'">Norwegian</option><br /><option value="'pl'">Polish</option><br /><option value="'pt'">Portuguese</option><br /><option value="'ro'">Romanian</option><br /><option value="'ru'">Russian</option><br /><option value="'sr'">Serbian</option><br /><option value="'sk'">Slovak</option><br /><option value="'sl'">Slovenian</option><br /><option value="'es'">Spanish</option><br /><option value="'sv'">Swedish</option><br /><option value="'uk'">Ukrainian</option><br /><option selected="'en'" value="'fr'">English</option><br /></select><br /><input value="'data:blog.url'" id="'url'" name="'u'" type="'hidden'/"><br /><input name="'sl'" type="'hidden'" value="'en'/"><br /><input name="'hl'" type="'hidden'" value="'en'/"><br /><input name="'ie'" type="'hidden'" value="'UTF-8'/"><br /><input style="'width:" type="'submit'" value="'Go'/"><br /></td></tr></table></form><br /><h6>Widget by <u><a href="'http://1001-tricks.blogspot.com/'">1001-Tricks</a></u></h6><br /></div><br /><b:include name="'quickedit'/"><br /></b:includable><br /></b:widget><br />

* Then Click On SAVE TEMPLATE
* Go To Layout --> Page Elements , There You Could See Your New Translation Widget's Current Position On Your Blog, You Could Simply Change The Widget Position By Dragging It To The Position You Need. After Placing Your Widget Click Save.

Advanced Users Corner...

* This Widget Is Designed For The Bloggers Who Writes In English, Bloggers Who Writes In Other Languages Should Make Some Changes In The Widget Code.
ie, Bloggers Who Writes In Arabic Should Find And Change The Following Code From The Original Widget Code.
Change <option selected='en' value='vi'>English</option>
To <option selected='ar' value='vi'>Arabic</option>

And Also Change
<input name='sl' type='hidden' value='en'/>
To
<input name='sl' type='hidden' value='ar'/>

* For Changing The Word "Go" To Your Language Or Something Else, Find And Edit The Following Code.
<input style='width: auto;' type='submit' value='Go'/>

* If You Want Any Part Of Your Blog Post Remain Untranslated After The Conversion Do The Following
<span class='notranslate'>The Text Which Has To Remain Untranslated.</span>

alsoread: Add Favicon For Your Blog