Kumpulan Modifikasi Script Google Translate

Blogger secara default menyediakan fasilitas Google Translate sebagai widget blogger dengan antarmuka yang mudah dioperasionalkan. Selain sebagai widget, Google juga menyediakan API Google Translate yang secara gratis dan mudah untuk digunakan.

Widget Google translate pada blogger akan berfungsi menerjemahkan hampir semua teks baik pada halaman blog maupun artikel ke dalam bahasa yang tersedia oleh google translate. Seperti yang kita ketahui bahwa pengunjung blog bisa berasal dari mana saja, bisa lokal maupun internasional karena dunia internet bersifat global dan tidak terbatas hanya untuk satu negara tertentu, kecuali apabila blog anda memang dikunci khusus hanya bisa di akses oleh pengguna lokal.

Pemasangan widget gooogle translate di blog akan mempermudah pengunjung dari luar negri (internasioal) untuk bisa menerjemahkan bentuk bahasa tulisan blog yang digunakan kedalam bahasa mereka. Dengan sarana ini pengunjung blog dari luar negri akan lebih dipermudah untuk mengetahui arti dan makna dari keseluruhan halaman blog tersebut. Keuntungan menggunakan google translate di blog juga akan memberi nilai lebih pada blog itu sendiri, setidaknya pengunjung dari luar negri akan terbantu mengartikan (menerjemahkan) isi dari posting yang kita buat. Widget google translate ini juga ringan, jadi tidak memberatkan loading blog anda.

Informasi Singkat

Google Translate adalah layanan terjemahan mesin multibahasa gratis yang dikembangkan oleh Google, untuk menerjemahkan teks. Google Translate menawarkan antarmuka situs web, aplikasi seluler untuk Android dan iOS, dan API yang membantu pengembang membangun ekstensi peramban dan aplikasi perangkat lunak. Google Translate mendukung lebih dari 100 bahasa di berbagai tingkatan dan hingga April 2016, mengklaim lebih dari 500 juta total pengguna, dengan lebih dari 100 miliar kata diterjemahkan setiap hari.

Sumber : Wikipedia

DAFTAR ISI

Cara Pemasangan Widget Pada Blogger [Kode Default Google Translate]

Kode Google Translate Tampilan Melayang Default Top Bar

Kode Google Translate Tampilan Animasi Melayang Top Left

Kode Google Translate Dengan Tampilan List

Kode Google Translate Dengan Tampilan Gambar Bendera

Kode Google Translate Dengan Tampilan Gambar Female Icon

#1 Cara Pemasangan Widget Pada Blogger [Kode Default Google Translate]

Widget google translate pada blog pemasangannya bisa langsung menggunakan widget default yang ada pada blogger atau bisa juga menggunakan kode JavaScript dan kode HTML. Jika menggunakan widget default maka modifikasi tampilan cukup menggunakan kode CSS dari elemen kode HTML yang digunakan pada widget google translate.

Apabila menggunakan kode JavaScript atau Kode HTML maka kode tersebut bisa ditaruh menggunakan widget box HTML/Javascript yang ada pada menu pemilihan widget. Berikut cara pemasangan kode default script google translate untuk pengguna blogger.

Login ke blogspot untuk masuk ke dashboard blog.
Pilih Tata Letak kemudian pilih Tambahkan Gadget.
Pilih HTML/Javascript
Taruh kode pada kotak widget, setelah selesai tekan tombol Save

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

KETERANGAN
Kode widget google translate diatas akan menampilkan tampilan default google translate pada widget box blogger. Silakan tekan tombol Add to Blogger untuk mempermudah memasang widget pada blogger (blogspot).

PATCH for Enable Horizontal Scrolling

Pada tampilan perangkat HP / Mobile lebar kotak menu apabila opsi yang ditampilkan untuk semua negara maka akan terlihat sebagian pada layar HP dan juga tidak bisa digeser (scroll) horizontal. Hal ini disebabkan karena google translate menggunakan kode iFrame untuk daftar semua negara tersebut dan tidak dibuat untuk responsive serta tidak bisa di scroll horizontal. Solusi untuk memperbaiki masalah ini cukup memasang tambahan kode CSS dan Javascript di bawah ini, agar google translate bisa tetap kompatibel pada berbagai perangkat pengguna.
```
<style>
.goog-te-menu-value span:last-child{padding-right:5px;}
.goog-te-gadget-simple{border:1px solid #ccc !important;}
.goog-te-banner-frame.skiptranslate{display:none !important;}body{top:0px !important;}
.goog-te-menu-frame{max-width:100% !important;}
.goog-te-menu2{max-width:100% !important;overflow-x:scroll !important;box-sizing:border-box !important;height:auto !important;}
</style>
<script type='text/javascript'>
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%','overflow-x':'auto','box-sizing':'border-box','height':'auto'});
}else{setTimeout(changeGoogleStyles, 50);}}
changeGoogleStyles();}
</script>
```
Catatan ! Pilih semua tulisan teks kode pada kotak kode patch di atas kemudian gunakan tombol keyboard CTRL+C untuk menyalin. Silakan anda gunakan komputer PC / Laptop untuk memudahkan proses penyalinan kode. Taruh kode tersebut pada kotak widget yang anda gunakan untuk menaruh kode script google translate, silakan anda taruh pada posisi setelah teks script paling akhir.

#2 Kode Google Translate Tampilan Melayang Default Top Bar

Kode script google translate default akan menampilkan horizontal bar yang terletak pada posisi absolute di atas halaman web / blog. Hal tersebut akan memudahkan pengunjung melihat tampilan google translate tanpa menggangu tampilan konten web / blog. Berikut contoh google translate dalam tampilan horizontal bar.

See the Pen bGePQLv by Code Flare (@CodeFlareBlogspot) on CodePen.

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

#3 Kode Google Translate Tampilan Animasi Melayang Top Left

Modifikasi lain dari tampilan google translate adalah dengan membuat dalam posisi melayang (float) sehingga dapat memanfaatkan penggunaan ruang yang ada pada tampilan web / blog. Penggunaan efek melayang juga memudahkan pengunjung blog untuk mengetahui widget google translate yang telah terpasang pada halaman tersebut.

See the Pen Google Translate Float Top Left by Code Flare (@CodeFlareBlogspot) on CodePen.

<div id="googleTranslate">
<table border="0">
<tr>
<td><div id="google_translate_element"></div></td>
<td style="vertical-align:bottom;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix3W7MnplrQG8m-BRQFOjnCSrBONbp30xOOyN4lUiu0mIiFG4n9Ssh6Lutn8hxwPlQYsThinTbbLkVxyVcFWin8w1vUqJIW0ZfTmILWM-O7uDErV1499OGONbl6LeOn4kRItekNY83axQ/s1600/translate.png" style="height:24px;cursor:pointer;" onclick="showGTranslate()"/></td>
</tr>
</table>
</div>

<style>
#googleTranslate{
position:fixed;
top:0;
left:0;
transition:left .5s linear;
z-index:+99999999999999999999;
}
</style>

<script>
$("#googleTranslate").remove().appendTo("body");
var GTWidth;
$(document).ready(function() {
setTimeout(function(){
GTWidth=$("#google_translate_element").width()+2;
$("#googleTranslate").css("left",(GTWidth*(-1))+"px");
},5000);
});
function showGTranslate(){
var showLeft = $("#googleTranslate").position().left;
if(showLeft<0){
$("#googleTranslate").css("left","0");
}else{
$("#googleTranslate").css("left",(GTWidth*(-1))+"px");
}
}
</script>

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

#4 Kode Google Translate Dengan Tampilan List

Jika ingin digunakan pada widget box, silakan gunakan google translate dengan modifikasi list berikut ini. Tampilan google translate dengan tipe list ini menggunakan modifikasi CSS yang kekinian, sehingga sangat cocok dengan tipe template yang modern yang serba menampilkan dimensi form dan huruf yang besar-besar. Berikut contoh Google Translate Dengan Tampilan List yang eye catching dan terlihat uptodate.

#5 Kode Google Translate Dengan Tampilan Gambar Bendera

Modifikasi tampilan google translate dengan menggunakan gambar bendera dari negara yang diwakilkan untuk mewakili bahasa tersebut. Tampilan google translate menggunakan gambar bendera memang cukup unik karena bisa memberikan kesan dinamis dan juga menarik. Tampilan google translate yang menggunakan tampilan bendera tersedia dalam tiga bentuk tampilan, yaitu bendera dalam bentuk kotak, bentuk lingkaran dan bentuk animasi bendera. Berikut contoh google translate yang menggunakan tampilan bendera.

Bendera Bentuk Kotak

Bendera Bentuk Bulat

Animasi Bendera

#6 Kode Google Translate Dengan Tampilan Gambar Female Icon

Modifikasi tampilan google translate menggunakan gambar Female Icon yang terlihat eye catching dan berbeda dengan yang lain. Gambar female icon mewakili dari bahasa yang dapat di translate dengan menggunakan widget google translate yang terpasang, dilengkapi pula dengan title elemen nama negara yang diwakili dari masing-masing female icon. Berikut contoh Google Translate Dengan Tampilan Gambar Female Icon.

Keyword

Blog, Blogger, Blogspot, Google, Translate, JQuery, HTML, CSS, Javascript, Code, Flag, Animated, GIF, Image, Widget, Tampilan, Bendera, Negara, Terjemah, Penterjemah, Animasi, Bentuk, Kotak, Bulat, Lingkaran, Cara, Memasang, Membuat, Efek, Melayang, Float

Incoming Search Term

Google Translate menggunakan animasi bendera, Kode Script Google Translate, Cara Memasang Script Google Translate, Membuat Google Translate Melayang, Animasi tombol google translate, gambar bendera negara animasi google translate, bendera gif google translate, animasi melayang google translate, google translate bentuk kotak dan bulat

Main Settings

Header Ads

Kumpulan Modifikasi Script Google Translate

No comments

Post Top Ad

Author Details

Post Bottom Ad

Top Users

Comments

Top Pages

Formulir Kontak

Subscribe

Popular

Category