Friday, 6 January 2017

Cara Membuat Widget Translate Blog Keren

Widget translate bisa dibilang sebagai salah satu widget yang penting dan wajib untuk dipasang pada sebuah blog. Tujuan dari pemasangan widget ini sendiri adalah agar para pembaca blog dari luar wilayah (luar negeri) bisa menikmati berbagai artikel yang kita miliki.

Jadi nantinya, dengan menggunkan widget ini seluruh isi blog kita akan diterjemahkan ke dalam bahasa lain, mulai dari judul, isi artikel dan lain sebagainya. Untuk memasangnya sebenarnya sangat mudah yaitu cukup menuju Tata Letak – Tambahkan Gadget – Terjemahan.

Namun bagi sebagian orang widget yang ada di blogger memiliki tampilan yang biasa-biasa saja atau bisa juga dibilang “kurang greget”. Tapi jangan salah, ternyata widget yang sangat sederhana itu bisa sedikit dimodifikasi sehingga tampilannya menjadi lebih ciamik, seperti yang terlihat pada gambar berikut ini:

Cara Membuat Widget Translate Blog Keren

Widget yang sangat sederhana bisa diubah tampilannya sehingga menjadi lebih kekinian dan cocok digunakan untuk template-template masa kini. Pemasangan widget ini juga cocok bagi kamu yang memiliki pengunjung dari luar negeri.

Baca juga:

Cara Membuat Widget Translate Blog Keren

Untuk membuat widget translate blog yang keren seperti gambar di atas kamu cukup melakukan beberapa langkah di bawah ini:
  1. Masuk ke akun blogger kamu kemudian pilih Tata Letak, pada bagian sidebar (sisi samping silahkan klik Tambahkan Gadget 
  2. Pilih HTML/Javascript dan paste kode berikut ini kemudian simpan dan jangan lupa klik Simpan Setelan. Untuk mengubah warnanya silahkan ganti #7CC5ED; dengan warna yang kamu suka.

<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>

Sekian tutorial kali ini semoga bisa bermanfaat dan selamat mencoba. Apabila ada yang bingung atau kurang jelas silahkan tanyakan melalui kolom komentar.


EmoticonEmoticon