Namun dari segi tampilan pasti tidak puas hanya dengan tampilan default yang diberikan oleh Google Translate, maka dari itu disini sobat bisa mencoba tampilan yang berbeda dengan tampilan dari 3 gaya diatas.
Cara Memasang Google Translate Di Blog
1. Buka Blogger > Klik Tata Letak > Kemudian klik pada Tambah Gadget > Klik HTML/JavaScript > Tambahkan kode dibawah ini di dalamnya.<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('//translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
return false;
};
})();
</script>Tampilan Google Translate
Untuk merubah tampilan dari segi warna dan lebar widget bisa sobat sesuaikan sendiri agar lebih puas lagi.
Mungkin sekian artikel tentang Cara Memasang Widget Google Translate Di Blog Keren dan semoga artikel ini sangat bermanfaat bagi sobat semua.
