Namun jika mereka ingin menyalin Isi Artikel anda dan membawanya ke Google Translate untuk mengetahui isi dari artikel tersebut. Tapi tentunya pengunjung suka dengan hal yang simple dan tidak ribet. Maka dari itu Anda bisa membantu mereka untuk tanpa harus membuat mereka menyalisan Isi Artikel ke Google Translate. Hal yang harus kita atasi adalah dengan memasang Widget Terjemahan pada blog.
Tapi kita masih membutuhkan Google Translate supaya Widget Terjemahan Kita berfungsi. Ada banyak bahasa yang bisa dipilih. Dan tentu saja ada Bahasa Inggris sebagai bahasa pokok yang penting. Dengan dipasangnya Widget Terjemahan ini maka pengunjung anda bisa Menerjemahkan Artikel dengan mudah. Walaupun hasil terjemahan kurang baik.
Nah selanjutnya saya akan sajikan tutorial Cara Memasang Widget Terjemahan Dengan CSS sebagai berikut ini.
Cara Memasang Widget Terjemahan CSS
Widget Terjemahan ini bisa anda letakkan dibilah kanan/kiri atau yang disebut sidebar. Mengapa harus di sidebar? Agar pengunjung mudah melihat, Bagaimana tertarik untuk memasang Widget Terjamahan? Dalam langkah pertama Anda hanya perlu membuat Widget/Gadget Baru dan memasukkan kode koding dibawah ini ke dalam Widget tersebut. Berikut langkah-langkah Memasang Widget Terjemahan Dengan CSS .
1. Masuk Ke Akun Blogger Masing-Masing > Klik Menu Tata Letak -> Tambah Gadget Baru > Pilih Opsi HTML/Javascript.
2. Salin kode dibawah ini dan letakan kedalam Widget/Gadget Baru anda .
Kode Widget Terjemahan
<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> 3. Terakhir Simpan Widget dan lihat hasilnya
Kesimpulan
Kesimpulan Jadi cara memasang Widget Terjemahan dengan CSS ini cukup mudah untuk dipraktekan, hanya dengan mencopy-paste kode diatas ke dalam Widget/Gadget . Dan hasilnya akan memuaskan.
Mungkin cukup disini artikel tentang Cara Memasang Widget Terjemahan Dengan CSS Semoga apa yang saya sampaikan ini bermanfaat tentunya bagi anda khususnya bagi para blogger, Apabila anda masih kurang paham dengan tutorial diatas silahkan berkomentar dibawah postingan ini.