Memasang Widget Google Translate di Blog - Saya sering menemukan website yang memasang widget translate dengan gaya formasi bendera dari banyak sekali negara yang berfungsi menerjemahkan suatu halaman ke bahasa tertentu dan di blogger sendiri sudah memiliki widget bawaan Google Translate dengan fungsi yang sama dengan 3 gaya berbeda yaitu Vertikal, Horizontal dan Drop Down.
Nah kali ini aku akan membuatkan widget Google Translate ini dengan gaya berbeda yang dapat anda pasang di bab sidebar atau footer blog. Berikut cara penerapannya :
Buka blogger anda > Tata Letak > Kemudian klik pada Tambahkan Gadget > Klik HTML/JavaScript > Salin dan terapkan semua isyarat di bawah ini di dalamnya > Simpan widget.
<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:#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; } #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="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="Memasang Widget Google 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>Setelah itu lihat hasilnya.
See the Pen Widget Google Translate by (@arlinadesign) on CodePen.
Untuk pengaturan lebar widget, warna, dan lainnya dapat anda sesuaikan dengan tema blog anda.
Selamat mencoba.
Source : https://tutoorbagus.blogspot.com//search?q=memasang-widget-google-translate
0 Response to "Memasang Widget Google Translate"
Post a Comment