Cara Mudah Memasang Widget Translate

Cara Memasang Widget Translate dengan tampilan Simple
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:&quot;&quot;;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.
Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/07/simple-translate-widgets.html

Share this :

Previous
Next Post »

24 komentar

Tuliskan komentar
Admin
author
3 Jul 2015, 17:06:00 delete

nice gan infonya

Balas
avatar
Unknown
author
3 Jul 2015, 18:52:00 delete

kyknya perlu nih gan :D . request widget lainnya boleh gan ? :)

Balas
avatar
3 Jul 2015, 18:57:00 delete

boleh gan, just comment :)

Balas
avatar
Unknown
author
3 Jul 2015, 19:47:00 delete

Ijin comot gan buat blog saya

www.geruang.com <--nitip gan

Balas
avatar
Admin Warga
author
3 Jul 2015, 20:36:00 delete

wih gampang nih kayaknya ,oke gue coba

Balas
avatar
Onyet
author
3 Jul 2015, 23:01:00 delete

wih keren + simple.. Nice post

Balas
avatar
Unknown
author
4 Jul 2015, 00:08:00 delete

wih keren kayaknya ni gan :)

Balas
avatar
4 Jul 2015, 02:25:00 delete

Ini nih yang ane cari, thanks gan, ijin nerapin :D

Balas
avatar
4 Jul 2015, 02:30:00 delete

lumayan gan, jumlah bahasanya banyak

Balas
avatar
Unknown
author
4 Jul 2015, 04:27:00 delete

Mayan nih dapet ilmu baru thank,s gan share nya

Balas
avatar
Admin
author
4 Jul 2015, 05:05:00 delete

wah keren nih widgetnya, nice share gan

Balas
avatar
Devy
author
4 Jul 2015, 07:58:00 delete

hmm...semudah itu, HEBAT, mau langsung coba dech, biar paman sam bisa membaca tulisan di blog saya yang berbahasa INDO.

Balas
avatar
4 Jul 2015, 10:39:00 delete

hehe silahkan dicoba bang :)

Balas
avatar
4 Jul 2015, 12:00:00 delete

wah saya baru tahu ada cara ginian kalau saya pake bing translate simpel banget gan

Balas
avatar
4 Jul 2015, 12:59:00 delete

hehe mantap gan.. ini pakenya google translate

Balas
avatar
Nova
author
4 Jul 2015, 19:40:00 delete

Keren sekali kakak ngerti css hihi, nice post sangat bermanfaat

Balas
avatar
ds
author
4 Jul 2015, 19:42:00 delete

ternyata mudah juga, langsung coba :3

Balas
avatar
Share
author
5 Jul 2015, 00:35:00 delete

wah ini gue perlu widget translate ini gan,blog gue banyak dari negara lain.
nice deh gan!!

Balas
avatar
Unknown
author
5 Jul 2015, 02:40:00 delete

ane bookmark dulu deh gan, buat kapan-kapan kalau perlu, thanks deh gan nice post :D

Balas
avatar
Unknown
author
5 Jul 2015, 06:48:00 delete

Wah, banyak macam bahasa nya ya mas, SEO pula tampilannya..
Tapi kalo untuk blog yang menginginkan speed loading nya cepat kyanya ngk cocok..

Balas
avatar
5 Jul 2015, 19:41:00 delete

Berat ini tapi. Saya pernah coba di blog saya yang pertama

Balas
avatar
5 Jul 2015, 19:50:00 delete

iya sih gan, ane juga merekomendasikan yg punya banyak visitor luar negri

Balas
avatar
Unknown
author
24 Jul 2015, 21:30:00 delete

gan bedanya dengan google translate apa gan ?

Balas
avatar
Unknown
author
21 Dec 2017, 12:19:00 delete

Halo Bro Tolong dong bantuannya

aku 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

Balas
avatar

✖ 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