Thêm Widget Google Translate cho blog

Cài đặt Google Translate Blog Widget - Tôi thường tìm các trang web cài đặt widget dịch các phong cách của một hàng cờ của các quốc gia khác nhau phục vụ cho dịch một trang vào một ngôn ngữ cụ thể và trong các blogger của mình đã có một bẩm sinh Google Translate widget có cùng chức năng với 3 phong cách khác nhau là Vertical ngang và Drop Down.


Cũng thời gian này tôi sẽ chia sẻ điều này với Google Translate phong cách tiện ích khác nhau mà bạn có thể cắm trong sidebar hoặc footer blog. Đây là cách các ứng dụng:

Tới  Blogger > Layout của bạn > Sau đó bấm vào Add Gadget > Nhấp vào HTML/JavaScript > Sao chép và áp dụng tất cả các mã dưới đây vào nó > Save widget.

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

Demo Online: