Cara Memasang Widget Translate Di Blog, Halo Indonesian Blogger, Pasti anda pernah menggunakan tools ini untuk mengartikan bahasa bahasa yang sedang anda cari atau butuhkan. Translate ini biasanya dipakai untuk menerjemahkan bahasa asing ke bahasa yang kita inginkan.
Widget ini bisa anda pasang pada blog anda dengan mudah dan sangat berfungsi baik pada blog anda jika ada pengunjung asing yang tidak mengerti dan paham isi dari artikel anda dan ingin mengartikannya kedalam bahasa mereka.
Jangan khawatir, karena kali ini saya akan share sedikit tips untuk menerapkan translate untuk blog Anda, yuk langsung disimak dan terapkan saja caranya.
Cara Memasang Widget Translate Di Blog
- Pertama silahkan login ke akun blog anda
- Silahkan menuju Layout atau Tata Letak dari blog anda
- Pilih tambahkan gadget dan scrol kebawah pilih HTML/Javascript
- Setelah itu masukan script dibawah ini kedalam kolom yang tersedia
<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>Jika Sudah Silahkan anda klik Simpan dan lihat hasilnya. Anda telah berhasil menerapkan Cara Memasang Widget Translate Di Blog, selamat. Silahkan letakkan widget ini sesuai keinginan anda, Widget ini bisa anda letakkan pada Sidebar atau Footer dari blog anda.
Agar blog anda tidak terlalu berat saat loading saya sarankan untuk tidak menggunakan terlalu banyak widget pada blog atau halaman yang anda karena itu memiliki banyak Efek Menggunakan Widget Berlebihan sangat tidak recommended.
Fungsi dari penggunaan widget ini jika anda menargetkan visitor atau pembaca anda dari luar negeri yang tidak mengerti dengan bahasa yang anda gunakan pada blog anda. Jika anda menargetkan pembaca Indonesia, maka tidak perlu untuk menggunakannya.
Ok itu dia cara memasang widget translate di blog. Bagaimana? Sangat mudah sekali bukan. Langsung praktek saja guys sembari belajar edit edit HTML jika anda blogger pemula.
Mungkin itu saja yang dapat saya bagikan semoga bermanfaat dan jika ada kritik dan saran untuk blog ini silahkan berikan komentar anda pada kolom yang tersedia, Terima Kasih