Memasang Widget Google Translate

10/12/2014

Memasang Widget Google Translate di Blog - Saya sering menemukan website yang memasang widget translate dengan gaya deretan bendera dari berbagai negara yang berfungsi menerjemahkan suatu halaman ke bahasa tertentu dan di blogger sendiri sudah mempunyai widget bawaan Google Translate dengan fungsi yang sama dengan 3 gaya berbeda yaitu Vertikal, Horizontal dan Drop Down.

Nah kali ini saya akan berbagi widget Google Translate ini dengan gaya berbeda yang bisa anda pasang di bagian sidebar atau footer blog. Berikut cara penerapannya :

Buka blogger anda > Tata Letak > Kemudian klik pada Tambahkan Gadget > Klik  HTML/JavaScript > Salin dan terapkan semua kode 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="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 Arlina Design (@arlinadesign) on CodePen.



Untuk pengaturan lebar widget, warna, dan lainnya bisa anda sesuaikan dengan tema blog anda.


Selamat mencoba.


Source : http://arlinadesign.blogspot.com/2014/10/memasang-widget-google-translate.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

21 comments

Keren sih cuma saya kurang tertarik aja karena otomatis sendiri di blog hehe

Balas

oia, bisa jg secara otomatis

Balas

pasang ah.. keren kayaknya ini :-bd

Balas

sip, silahkan mas

Balas

hola de nuevo arlina, disculpa creo que estas muy ocupada, pero me gustaria saber si podrias ayudarme con este <a href="http://crisan-pruebas.blogspot.mx/">Blog</a> en ajustarlo para moviles, lo eh construido basandome en la plantilla minima de blogger. y con algo de tu plantilla MINIMA COLORED. te lo agradeceria muchisimo.

Balas

your comments not related to our posts, please visit Off Topic page

Balas

Ok, sorry, please delete my comment, i see right now your off topic page

Balas

kreatif,, keren sekali sis.. untuk penambahan bahasa bisa gak?

Balas

nah ini kan new tab, kalo dibikin tidak new tab gmna mbk...
tp metode tampilannya seperti gadget translate yang di sediakan google translate..

Balas

boleh request gak mbak?
coba bikin template personal blog, yg simpel udah gitu flat mbak hehe =D
makasih mbak :lv

Balas

bisa mas, di tambahkan lewat htmlnya

Balas

kl di utak-atik lg sepertinya bisa

Balas

ok, nanti sy usahakan

Balas

widget translate ini sangat berguna sekali bagi pengunjung di negara lain ya mbak :)

Balas

Hi how are you i want you asked how I worked this post-wrapper post post-body post-title reamore post img all etc......
Please tutorial to us
[url=http://www.gulfup.com/?wJzvtE][img]http://im68.gulfup.com/AXi3FG.png[/img][/url]

Balas

[img]http://im68.gulfup.com/AXi3FG.png[/img]
here

Balas

mas rully emang senengnya yg otomatis hehehe...pisss kang

Balas

Simple tapi tetep keren mbak...lanjutkan

Balas

your comment not related to our post, please visit off topic page

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.