![]() |
Simple Translate Widgets |
Widget translate dengan tampilan simple sangat cocok untuk blog atau web dengan visitor yang kebanyakan berasal dari luar negri. Untuk blog internasional atau yang memiliki target market luar negri sangat saya rekomendasikan untuk menggunakan widget ini.
Widget ini memiliki banyak bahasa yang dapat Anda setting sendiri jumlahnya. Namun, jumlah bahasa yang digunakan tidak boleh melebihi jumlah pada Google Translate. Tidak perlu basa-basi lagi, silahkan simak tutorial cara memasang widget translate simple ini.
Cara Memasang Simple Translate Widget
1. Letakkan CSS berikut tepat sebelum atau di atas kode ]]></b:skin> atau </style>, lalu save.
/* CSS Simple Translate Widget */
#translator-wrapper{display:block;width:100%;max-width:350px;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:#29abe2;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}
2. Masuk ke menu tata letak > add widget > HTML/Javascript. Masukkan kode berikut lalu save.
<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. Selesai bro.
Saya rasa cukup sekian, silahkan berikan komentar Anda sebelum meninggalkan halaman ini. Terima Kasih atas kunjungannya di Opick Weblog.
Source : https://wajahilmu.blogspot.com/2015/07/simple-translate-widgets.html
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
24 komentar
Tuliskan komentarnice gan infonya
Balaskyknya perlu nih gan :D . request widget lainnya boleh gan ? :)
Balasboleh gan, just comment :)
BalasIjin comot gan buat blog saya
Balaswww.geruang.com <--nitip gan
wih gampang nih kayaknya ,oke gue coba
Balaswih keren + simple.. Nice post
Balaswih keren kayaknya ni gan :)
BalasIni nih yang ane cari, thanks gan, ijin nerapin :D
Balaslumayan gan, jumlah bahasanya banyak
BalasMayan nih dapet ilmu baru thank,s gan share nya
Balaswah keren nih widgetnya, nice share gan
Balashmm...semudah itu, HEBAT, mau langsung coba dech, biar paman sam bisa membaca tulisan di blog saya yang berbahasa INDO.
Balashehe silahkan dicoba bang :)
Balaswah saya baru tahu ada cara ginian kalau saya pake bing translate simpel banget gan
Balashehe mantap gan.. ini pakenya google translate
BalasKeren sekali kakak ngerti css hihi, nice post sangat bermanfaat
Balasternyata mudah juga, langsung coba :3
Balaswah ini gue perlu widget translate ini gan,blog gue banyak dari negara lain.
Balasnice deh gan!!
ane bookmark dulu deh gan, buat kapan-kapan kalau perlu, thanks deh gan nice post :D
BalasWah, banyak macam bahasa nya ya mas, SEO pula tampilannya..
BalasTapi kalo untuk blog yang menginginkan speed loading nya cepat kyanya ngk cocok..
Berat ini tapi. Saya pernah coba di blog saya yang pertama
Balasiya sih gan, ane juga merekomendasikan yg punya banyak visitor luar negri
Balasgan bedanya dengan google translate apa gan ?
BalasHalo Bro Tolong dong bantuannya
Balasaku sudah memasang script yang ada di atas tapi yang tidak muncul adalah segitiga putih yang di kotak biru itu bisa tolong bantu aku untuk membuatnya menjadi muncul.
Tolong Dong Min @OpickWeblog
✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.
EmoticonEmoticon OOT