Cara Memasang Widget Terjemahan (Google Translate) Keren Di Blogger

Memiliki visitor dari luar dan berbeda bahasa mungkin sangatlah menguntungkan,namun karena beda bahasa tersebut maka membuat mereka tidak bisa membaca artikel di blog kita. Kecuali jika mereka bisa menggunakan bahasa Indonesia. Nah mungkin anda memiliki banyak visitor dari luar negeri nah pasti mereka bingung dengan bahasa yang anda gunakan di artikel.

Jika mereka mau mereka bisa menyalin url artikel anda dan membawanya ke google translate untuk mengetahui artikel. Tapi tentunya pengunjung suka dengan hal yang simple dan gak ribet. Maka kita bisa membantu mereka untuk menerjemahkan artikel tanpa harus membuat mereka menyalin url dan ke google translate. Kita hanya perlu memasang widget.

Tapi kita masih akan membutuhkan google translate supaya widget bisa berfungsi. Ada banyak bahasa yang bisa dipilih. Dan tentunya ada bahasa Inggris sebagai bahasa pokok yang penting. Dengan dipasangnya widget ini maka visitor bisa menerjemahkan artikel dengan mudah. Walaupun hasil terjemahannya kurang baik. 

Cara Memasang Widget Google Translate Keren

Widget ini bisa anda letakkan disidebar tentunya sidebar atas agar mudah dilihat. Gimana tertarik untuk memasang widget google translatenya? Anda nanti hanya perlu membuat wdiget/gadget baru dan memasukkan kode-kode dibawah ini didalam widget. Berikut langkah-langkahnya :

Langkah 1

Masuk ke blogger, Tata Letak → Tambahkan Gadget → HTML/Javascript

Langkah 2

Salin semua kode dibawah ini dan masukkan di widget baru yang dibuat

<div id="wrapper">
<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>
</div>

#wrapper {
font-family:Lato, sans-serif;
max-width:70%;
margin:50px auto;
}

#translator-wrapper {
display:block;
width:90%;
max-width:300px;
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:#2cba2c;
border:none;
color:#fff;
text-decoration:none;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
width:14%;
transition:all .3s ease;
margin:0;
}

#translator-wrapper a:before {
content:"";
display:block;
width:0;
height:0;
border:6px solid transparent;
border-left-color:#FFF;
position:absolute;
top:50%;
left:45%;
margin-top:-5px;
}

#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;
}

#translator-wrapper a:hover,#translator-wrapper a:active {
opacity:0.9;
}

(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('https://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();

Lalu simpan widget.

Selesai mudah bukan. Gimana sekarang buka blog sobat dan lihat widgetnya. Coba translate widget anda ke bahasa yang anda inginkan untuk menguji apakah widget bekerja. Oke cukup sekian tutorial yang bisa saya bagikan ini semoga bisa membantu dan bermanfaat.