Cara Memasang Widget Translate Ringan Responsive Di Blog

(isi iklan)

Pada kesempatan siang ini saya akan membagi cara membuat widget Google Translate yang sangat ringan dan Resonsive pada blog, tentunya tidak seperti Google Translate pada umumnya yang ada pada bawaan widget blog. di karenakan sangat berat untuk blog maka banyak para bloggers tidak ada yang memasang widget Google Translate ini. Padahal fungsinya sangat penting sekali bagi blog itu sendiri.

Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Murni, dibuat dari kode HTML dan JavaScript, sehingga Anda bisa terbebas dari permintaan HTTP yang biasanya datang dari JavaScript bawaan widget Google Translate. Di sini JavaScript berfungsi untuk melakukan pemformatan URL translasi berdasarkan pola query string dari Google Translate yang berbentuk seperti ini agar kita bisa menuju ke halaman Google Translate tanpa harus terlibat dengannya pada saat awal kunjungan:

http://translate.google.com/translate?u=http://www.nama-situs.com&langpair=from|to&hl=en

• from ⇒ Bahasa Asal
• to ⇒ Bahasa Tujuan

Oke untuk pemasangan widget ini kita tiggal pergi ke Tata Letak dan Klik Tambah Gadget

Untuk Kode Widget isi seperti ini:

<style type="text/css"> #translator-wrapper { display:block; width:200px; border:1px solid #0A340A; background-color:white; overflow:hidden; position:relative; } #translator-wrapper select { border:none; background:transparent; font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif; width:100%; color:black; -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:#0A340A; border:none; color:white; margin:0 0; text-decoration:none; position:absolute; top:0; right:0; bottom:0; cursor:pointer; width:30px; } #translator-wrapper a:before { content:""; display:block; width:0; height:0; border:5px solid transparent; border-left-color:white; position:absolute; top:50%; left:13px; margin-top:-5px; } #translator-wrapper a:hover {background-color:#0A2C0A} #translator-wrapper a:active {background-color:#082408} #translator-wrapper select:focus, #translator-wrapper a:focus, #translator-wrapper select:active, #translator-wrapper a:active { border:none; outline:none; cursor:pointer; } </style> <h3>Translate this page to:</h3> <div id="translator-wrapper"> <select id="translate-language"> <option value="en" selected="selected">English</option> <option value="id">Indonesian</option> <option value="af">Afrikaans</option> <option value="sq">Albanian</option> <option value="ar">Arabic</option> <option value="hy">Armenian</option> <option value="az">Azerbaijani</option> <option value="eu">Basque</option> <option value="be">Belarusian</option> <option value="bn">Bengali</option> <option value="bg">Bulgarian</option> <option value="ca">Catalan</option> <option value="zh-CN">Chinese</option> <option value="hr">Croatian</option> <option value="cs">Czech</option> <option value="da">Danish</option> <option value="nl">Dutch</option> <option value="en">English</option> <option value="eo">Esperanto</option> <option value="et">Estonian</option> <option value="tl">Filipino</option> <option value="fi">Finnish</option> <option value="fr">French</option> <option value="gl">Galician</option> <option value="ka">Georgian</option> <option value="de">German</option> <option value="el">Greek</option> <option value="gu">Gujarati</option> <option value="ht">Haitian Creole</option> <option value="iw">Hebrew</option> <option value="hi">Hindi</option> <option value="hu">Hungarian</option> <option value="is">Icelandic</option> <option value="id">Indonesian</option> <option value="ga">Irish</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="kn">Kannada</option> <option value="ko">Korean</option> <option value="la">Latin</option> <option value="lv">Latvian</option> <option value="lt">Lithuanian</option> <option value="mk">Macedonian</option> <option value="ms">Malay</option> <option value="mt">Maltese</option> <option value="no">Norwegian</option> <option value="fa">Persian</option> <option value="pl">Polish</option> <option value="pt">Portuguese</option> <option value="ro">Romanian</option> <option value="ru">Russian</option> <option value="sr">Serbian</option> <option value="sk">Slovak</option> <option value="sl">Slovenian</option> <option value="es">Spanish</option> <option value="sw">Swahili</option> <option value="sv">Swedish</option> <option value="ta">Tamil</option> <option value="te">Telugu</option> <option value="th">Thai</option> <option value="tr">Turkish</option> <option value="uk">Ukrainian</option> <option value="ur">Urdu</option> <option value="vi">Vietnamese</option> <option value="cy">Welsh</option> <option value="yi">Yiddish</option> </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>

 Copy Kode di atas ke dalam HTML.Javascript gadget:

Oke selesai sudah Google Translate Ringan telah terpasang pada blog sobat...
Saya rasa sudah cukup jelas dan bisa di pahami... Untuk lebar atau warna bisa di ubah sesuai selera masing-masing dengan  HTML Color... di jamin cocok dengan selera pastinya.
Oke sudah cukup jelas sekali sekian dulu dari saya,
Salam Bloggers.....

Tweet

Judul	Cara Memasang Widget Translate Ringan Responsive Di Blog
Deskripsi	Pada kesempatan siang ini saya akan membagi cara membuat widget Google Translate yang sangat ringan dan Resonsive pada blog, tentunya tida...
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER