How to add Google translator button to your blog

Most bloggers do complain of loss of international visitors on their blog. I reason that what could be the source and deduce it that it is the language. A person that understand only French will back out of a site with only English language and no other means of translating it to their own Lingua Franca, am dropping this translation button so that your visitors from another country will continue surfing on your site easily when they are able to translate the language to theirs.

How to set google translate button for bloggers

1. Login into your blogspot admin mode
2. Select Layout from the drop down options
3. Select Add new gadget from any position you want it to be
4. Click on HTML/Javascript 
5. Leave the title area empty and paste the below code inside the big box

<style type="text/css"><div> #translator-wrapper {</div> <div>   display:block;</div> <div>   width:90%;</div> <div>   max-width:300px;  </div> <div>   border:none;  </div> <div>   background-color:#fff;</div> <div>   color:#444;</div> <div>   overflow:hidden;</div> <div>   position:relative;</div> <div>   height:40px;</div> <div>   line-height:40px;</div> <div>   border:1px solid #e0e0e0;</div> <div> }</div> <div> #translator-wrapper select {</div> <div>   border:none;</div> <div>   background:transparent;</div> <div>   font-family:'Verdana',Arial,Sans-Serif;</div> <div>   font-size:12px;</div> <div>   width:100%;</div> <div>   color:#444;</div> <div>   -webkit-box-sizing:border-box;</div> <div>   -moz-box-sizing:border-box;</div> <div>   box-sizing:border-box;</div> <div>   -webkit-appearance:none;</div> <div>   cursor:text;</div> <div>   padding:5px 10px;</div> <div> }</div> <div> #translator-wrapper a,</div> <div> #translator-wrapper a:hover {</div> <div>   display:block;</div> <div>   background-color:#4791d2;</div> <div>   border:none;</div> <div>   color:#fff;</div> <div>   margin:0 0;</div> <div>   text-decoration:none;</div> <div>   position:absolute;</div> <div>   top:0;</div> <div>   right:0;</div> <div>   bottom:0;</div> <div>   cursor:pointer;</div> <div>   width:14%; </div> <div>   transition:all 0.3s ease;  </div> <div> }</div> <div> #translator-wrapper a:before {</div> <div>   content:"";</div> <div>   display:block;</div> <div>   width:0;</div> <div>   height:0;</div> <div>   border:6px solid transparent;</div> <div>   border-left-color:white;</div> <div>   position:absolute;</div> <div>   top:50%;</div> <div>   left:45%;</div> <div>   margin-top:-5px;</div> <div> }</div> <div> #translator-wrapper a:hover {opacity:0.9;}</div> <div> #translator-wrapper a:active {opacity:0.9;}</div> <div> #translator-wrapper select:focus,</div> <div> #translator-wrapper a:focus,</div> <div> #translator-wrapper select:active,</div> <div> #translator-wrapper a:active {</div> <div>   border:none;</div> <div>   outline:none;</div> <div>   cursor:pointer;</div> <div> }</div> <div> option {</div> <div>   background:#444;</div> <div>   color:#e0e0e0;</div> <div> }</div> <div> </style></div> <div> <div id="translator-wrapper"> </div> <div>     <select id="translate-language"></div> <div>         <option value="en" selected="selected">English</option></div> <div>         <option value="id">Indonesian</option></div> <div>         <option value="af">Afrikaans</option></div> <div>         <option value="sq">Albanian</option></div> <div>         <option value="ar">Arabic</option></div> <div>         <option value="hy">Armenian</option></div> <div>         <option value="az">Azerbaijani</option></div> <div>         <option value="eu">Basque</option></div> <div>         <option value="be">Belarusian</option></div> <div>         <option value="bn">Bengali</option></div> <div>         <option value="bg">Bulgarian</option></div> <div>         <option value="ca">Catalan</option></div> <div>         <option value="zh-CN">Chinese</option></div> <div>         <option value="hr">Croatian</option></div> <div>         <option value="cs">Czech</option></div> <div>         <option value="da">Danish</option></div> <div>         <option value="nl">Dutch</option></div> <div>         <option value="en">English</option></div> <div>         <option value="eo">Esperanto</option></div> <div>         <option value="et">Estonian</option></div> <div>         <option value="tl">Filipino</option></div> <div>         <option value="fi">Finnish</option></div> <div>         <option value="fr">French</option></div> <div>         <option value="gl">Galician</option></div> <div>         <option value="ka">Georgian</option></div> <div>         <option value="de">German</option></div> <div>         <option value="el">Greek</option></div> <div>         <option value="gu">Gujarati</option></div> <div>         <option value="ht">Haitian Creole</option></div> <div>         <option value="iw">Hebrew</option></div> <div>         <option value="hi">Hindi</option></div> <div>         <option value="hu">Hungarian</option></div> <div>         <option value="is">Icelandic</option></div> <div>         <option value="id">Indonesian</option></div> <div>         <option value="ga">Irish</option></div> <div>         <option value="it">Italian</option></div> <div>         <option value="ja">Japanese</option></div> <div>         <option value="kn">Kannada</option></div> <div>         <option value="ko">Korean</option></div> <div>         <option value="la">Latin</option></div> <div>         <option value="lv">Latvian</option></div> <div>         <option value="lt">Lithuanian</option></div> <div>         <option value="mk">Macedonian</option></div> <div>         <option value="ms">Malay</option></div> <div>         <option value="mt">Maltese</option></div> <div>         <option value="no">Norwegian</option></div> <div>         <option value="fa">Persian</option></div> <div>         <option value="pl">Polish</option></div> <div>         <option value="pt">Portuguese</option></div> <div>         <option value="ro">Romanian</option></div> <div>         <option value="ru">Russian</option></div> <div>         <option value="sr">Serbian</option></div> <div>         <option value="sk">Slovak</option></div> <div>         <option value="sl">Slovenian</option></div> <div>         <option value="es">Spanish</option></div> <div>         <option value="sw">Swahili</option></div> <div>         <option value="sv">Swedish</option></div> <div>         <option value="ta">Tamil</option></div> <div>         <option value="te">Telugu</option></div> <div>         <option value="th">Thai</option></div> <div>         <option value="tr">Turkish</option></div> <div>         <option value="uk">Ukrainian</option></div> <div>         <option value="ur">Urdu</option></div> <div>         <option value="vi">Vietnamese</option></div> <div>         <option value="cy">Welsh</option></div> <div>         <option value="yi">Yiddish</option></div> <div>     </select><a id="translate-me" href="#" title="Translate"></a></div> <div> </div> </div> <div> <script type="text/javascript"></div> <div> (function() {</div> <div>     var mylang = "id", // Your website language</div> <div>         anchor = document.getElementById('translate-me');</div> <div>     anchor.onclick = function() {</div> <div>         window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');</div> <div>         return false;</div> <div>     };</div> <div> })();</div> <div> </script>

Now save arrangement and view it on your blog.