Google Translate merupakan widget untuk blogger yang menyediakan menerjemahkan konten blog kedalam aneka macam bahasa. Anda niscaya sudah tau dong fungsinya buat apa? Widget ini berfungsi untuk memudahkan pengunjung semoga mengerti artikel kita/bahasa kita. Misalnya ada pengunjung aneh yang mengunjung blog kita dan mereka tidak mengerti bahasa kita, otomasi mereka secara manual menerjemahkan bahasa kita ke Google Translate. Dengan cara yang aku bagi berikut ini, anda tidak perlu pergi ke situs resmi Google Translate, sebab tutorial ini secara otomatis menerjemahankan artikel kita di dalam blog langsung. Makara laba memasang widget ini selain memudahkan pengunjung semoga mengerti artikel/bahasa kita, widget ini menerjemahkan tanpa pergi kesitus Google Translate, sebab artikel sudah diterjemahkan di dalam blog langsung.
Widget Translate ini akan tampil di setiap postingan anda, bergotong-royong widget ini sudah disediakan oleh Blogger dengan cara Dashboard - Tata letak - Add a Gadget - Google Translate. Namun, cara itu peletakan nya kurang efektif sebab biasanya para Blogger meletakan nya di sidebar, footer berbeda dengan postingan kali ini, Tekhnik pelatakan Translator nya diatas postingan dengan sumbangan instruksi Tag Condisional. Jika anda ingin membuatnya, silakan ikuti langkah-langkah berikut ini.
Cara Membuat dan Memasang Widget Google Translate diatas Postingan
Cara Pertama :
1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML.
Proses Pembuatan :
1. Temukan instruksi <data:post.body/> atau <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> Biasanya kedua instruksi diatas lebih dari satu, silakan anda pilih yang kedua/ketiga.
2. Copy&paste instruksi berikut ini, dan letakkan dibawah instruksi yang disebutkan diatas.
<b:if cond='data:blog.pageType == "item"'> <div style='text-align: left;'><div id='google_translate_element'/><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'id' }, 'google_translate_element'); } </script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div> </b:if> Modifikasi Widget Google Translate dengan instruksi CSS
Screenshoot :
Cara Pemasangan :
1. Buka Blogger - Kemudian login
2. Dashboard - Tata Letak
3. Edit - Add a Gadget
4. Pilih HTML/Java Script
5. Copy&paste instruksi berikut ini, dan paste di kolom HTML/Java Script
<style type="text/css"> #translate-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; } #translate-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; } #translate-wrapper a, #translate-wrapper a:hover { display:block; background-color:#4791d2; 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; } #translate-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; } #translate-wrapper a:hover {opacity:0.9;} #translate-wrapper a:active {opacity:0.9;} #translate-wrapper select:focus, #translate-wrapper a:focus, #translate-wrapper select:active, #translate-wrapper a:active { border:none; outline:none; cursor:pointer; } option { background:#444; color:#e0e0e0; } </style> <div id="translate-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="Cara Membuat dan Memasang Widget Google Translate diatas Postingan"></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>Demikianlah Tutorial Blogger kali ini, kalau terjadi kesalahan jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan anda lihat postingan/home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat dan Memasang Widget Google Translate diatas Postingan
