MEMBUAT WIDGET GOGLE TRANSLATE MELAYANG DI SAMPING BLOG

MEMASANG GOGLE TRANSLATE MELAYANG DI SAMPING BLOG

Pada tutorial kali ini, saya akan membahas bagaimana caranya menambah widget tambahan untuk gogle translate, tetapi bukan bawaan dari blog, melainkan bentuk lain dari gogle translate.

oke, untuk mempersingkat waktu, kita mulai saja pada tahap pekerjaannya.
1. Dasboard>> tata letak >>add widget>> html java scrip
2. masukan kode java scrip berikut, tergantung pilihan saudara...


  • Drop Down Widget
Widget ini berbentuk drop down menu yang berisi pilihan bahasa. Ada 3 bentuk:
widged drop down 1
1. untuk mendapatkan widget seperti gambar diatas, dapat di peroleh dengan memasukan kode berikut di bawah ini ,,,,


<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>




widged drop down 2
2.  untuk mendapatkan widget seperti gambar diatas, dapat di peroleh dengan memasukan kode berikut di bawah ini ,,,,,


<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


widged drop down 3
3.  untuk mendapatkan widget seperti gambar diatas, dapat di peroleh dengan memasukan kode berikut di bawah ini ,,,,,


<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Demikian kode html untuk pemasangan widged gogle translate dengan menu drop down/ bergeser kebawah, anda juga dapat menambahkan widget gogle translate lain yang dapat melayang di samping blog kita.. menarik bukan ? untuk mendapatkannya sangat mudah, prosesnya sama yaitu dengan widget html java scrip kemudian masukan kode html berikut ini....
Berikut ini beberapa pilihan widget gogle tranlate, untuk yang tabbet widget atau melayang di samping blog kita...

Tabbed Widget
Widget ini nantinya akan melayang di pojok tampilan blogmu. 
Ada 4 pilihan posisi:
  1. Kiri-Atas, kodenya : 
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false,
floatPosition: google.translate.TranslateElement.FloatPosition.TOP_LEFT
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

2. Kanan-Atas
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false,
floatPosition: google.translate.TranslateElement.FloatPosition.TOP_RIGHT
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

3. Kiri-Bawah


4. Kanan-Bawah
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto',
autoDisplay: false,
floatPosition: google.translate.TranslateElement.FloatPosition.TOP_RIGHT
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>



Automatic Widget gogle translate
Widget ini nantinya akan mendeteksi IP dari pengunjung. Jika pengunjung berasal dari bahasa yang berbeda dengan blog kita, maka akan keluar banner yang berfungsi untuk men-translate blog kita. Jika pengunjung berbahasa sama dengan blog kita, maka widget ini tidak akan menampilkan apapun.
 Berikut kodenya : 

<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'auto'
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Cara Memasangnya:
Copy salah satu script di atas. Buka blogmu, Add Widget - HTML/Javascript, dan pastekan script tadi. Dan save.
Selamat mencoba...


di