Widget Translate bisa dibilang cukup penting bagi suatu blog. Tujuan dari pemasangan widget itu sendiri yaitu agar pengunjung dari luar negeri bisa membaca artikel kita. Jadi nantinya dengan widget ini seluruh artikel kita dapat diterjemahkan ke dalam bahasa mereka.
Sebenarnya membuat widget terjemahan ini sangatlah mudah kalian hanya tinggal masuk ke tata letak – tambahkan gadget – terjemahan selesai. Namun tampilan yang diberikan terkesan jadul dan itu tidak keren.
Nah Pada kesempatan kali Maskalem akan membahas tentang Cara Membuat Widget Translate pada blog yang simpel namun enak untuk dipandang walaupun tamilannya biasa-biasa saja, namun dilihat oleh mata kita itu tidak bikin bosan. Berikut cara membuatnya.
Cara Membuat Widget Translate Pada Blogger
Untuk membuat Widget Translate ini kalian hanya membutuhkan 3 langkah saja
1. Masuk ke blogger, lalu kalian kllik tata letak, pada bagian sidebar kalian klik tambahkan gadget
2.Lalu kalian pilih HTML/Javascript lalu kalian masukkan kode dibawah ini
<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:#7CC5ED;
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 />English
<option value="id" />Indonesian
<option value="af" />Afrikaans
<option value="sq" />Albanian
<option value="ar" />Arabic
<option value="hy" />Armenian
<option value="az" />Azerbaijani
<option value="eu" />Basque
<option value="be" />Belarusian
<option value="bn" />Bengali
<option value="bg" />Bulgarian
<option value="ca" />Catalan
<option value="zh-CN" />Chinese
<option value="hr" />Croatian
<option value="cs" />Czech
<option value="da" />Danish
<option value="nl" />Dutch
<option value="en" />English
<option value="eo" />Esperanto
<option value="et" />Estonian
<option value="tl" />Filipino
<option value="fi" />Finnish
<option value="fr" />French
<option value="gl" />Galician
<option value="ka" />Georgian
<option value="de" />German
<option value="el" />Greek
<option value="gu" />Gujarati
<option value="ht" />Haitian Creole
<option value="iw" />Hebrew
<option value="hi" />Hindi
<option value="hu" />Hungarian
<option value="is" />Icelandic
<option value="id" />Indonesian
<option value="ga" />Irish
<option value="it" />Italian
<option value="ja" />Japanese
<option value="kn" />Kannada
<option value="ko" />Korean
<option value="la" />Latin
<option value="lv" />Latvian
<option value="lt" />Lithuanian
<option value="mk" />Macedonian
<option value="ms" />Malay
<option value="mt" />Maltese
<option value="no" />Norwegian
<option value="fa" />Persian
<option value="pl" />Polish
<option value="pt" />Portuguese
<option value="ro" />Romanian
<option value="ru" />Russian
<option value="sr" />Serbian
<option value="sk" />Slovak
<option value="sl" />Slovenian
<option value="es" />Spanish
<option value="sw" />Swahili
<option value="sv" />Swedish
<option value="ta" />Tamil
<option value="te" />Telugu
<option value="th" />Thai
<option value="tr" />Turkish
<option value="uk" />Ukrainian
<option value="ur" />Urdu
<option value="vi" />Vietnamese
<option value="cy" />Welsh
<option value="yi" />Yiddish
</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>
3. Save dan lihat hasilnya
Demikian artikel mengenai Cara Membuat Widget Translate Pada Blog.
Seperti yang bisa kalian lihat di sidebar bahwa saya menggunakan skrip Widget Translate ini pada blog saya. Mungkin itu saja yang bisa saya bagikan ke kalian, semoga bermanfaat, sampai ketemu lagi di lain waktu saya ucapkan terima kasih dan sampai jumpa.
Leave a Comment