Membuat Widget Translate Pada Blogger
Widget translate bisa dibilang cukup penting bagi suatu blog. Tujuan dari pemasangan widget itu sendiri adalah biar pengunjung dari luar negeri sanggup membaca artikel kita. Makara nantinya dengan widget ini seluruh artikel kita sanggup diterjemahkan ke dalam bahasa mereka.
Sebenarnya menciptakan widget terjemahan ini sangatlah gampang 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 aku akan membahas ihwal cara menciptakan widget translate pada blog yang mudah namun lezat 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 menciptakan widget ini kalian hanya membutuhkan 3 langkah saja
1. Masuk ke blogger, kemudian kalian kllik tata letak, pada bab sidebar kalian klik tambahkan gadget
2.Lalu kalian pilih HTML/Javascript lalu kalian masukkan arahan 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="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="Membuat Widget Translate Pada Blogger"></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#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="Membuat Widget Translate Pada Blogger"></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>
Seperti yang sanggup kalian lihat di sidebar bahwa aku memakai skrip ini pada blog saya. Mungkin itu saja yang sanggup aku bagikan ke kalian, semoga bermanfaat, hingga ketemu lagi di lain waktu aku ucapkan terima kasih dan hingga jumpa.
Sumber https://www.maskalem.com/
