Cara Memasang Widget Google Translator Show Hide




Cara Memasang Widget Google Translator Show Hide
Cara Memasang Widget Google Translator Show Hide

fungsi dari kita meyimpan widget di blog adalah widget translator atau widget yang di kenal untuk menerjemahkan bahasa yang digunakan di blog ke bahasa lain yang didukung widget tersebut agar sesuai dengn bahasa pengunjung blog. 

Show Hide Google Translator Widget
Mungkin dengan kita menambahkan widget translator dapat menigkatkan pengunjung pada blog kita, Nkelemahan dari kita memasang widget Google Translator ini adalah dapat menambah beban ketika blog sedang dimuat atau cukup berat loadingnya ketika mengakses kode js-nya.  karena itu banyak blog yang tidak menggunakan widget ini.

Dari itu saya mencoba untuk menambahkan asynchronous pada javascriptnya agar dapat dimuat setelah blog selesai dimuat sehingga tidak menambah beban loading blog dan ternyata widget tetap berjalan normal.

Nah untuk penyamaran tampilan widget translatornya ketika widget belum dimuat, saya menggantinya dengan div dan menyembunyikan widgetnya dengan jquery. Untuk memunculkan widgetnya maka div harus di klik seperti gambar gif di atas tersebut. demo lihat saja di atas.

Cara Memasang Widget Google Translator Show Hide

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>
Kode CSS
.translator-widget{position:relative;width:180px;padding:0;margin:0 auto}
.translator{position:absolute;top:0;left:0;text-align:center;width:100%;height:29px;line-height:29px;border:1px solid #333;background:#555;color:#efefef;cursor:pointer}
.translator:hover{background:#777}
.widget-translator{display:none;position:absolute;top:0;left:0;width:100%;height:29px;border:1px solid #333;background:#555;}
.close-translator{position:absolute;font-size:12px;color:red;top:6px;right:5px;cursor:pointer;font-weight:400;}
#google_translate_element{margin:2px 0 0 2px;}
4. Selanjutnya anda tambahkan kode jquery di bawah ini dan simpan di atas kode </body>
JavaScript
<script type='text/javascript'>
$(function() { 
    $(".translator").click(function () {
    $(".widget-translator").fadeIn();
});
    $(".close-translator").click(function() {
    $(".widget-translator").fadeOut();
});
 });
</script>
5. Salin kode di bawah ini dan silahkan simpan di mana Anda ingin menampilkan widgetnya pada blog anda.
HTML
<div class='translator-widget'>
<div class='translator'>Translate This Blog</div>
<div class='widget-translator'>
<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 async="async" type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <div class='close-translator' title='Close'>&#10006;</div>
 </div>
</div>
Bagi blog yang memang bukan bahasa Indonesia, silahkan anda ganti kode id pada pageLanguage di atas sesuai dengan bahasa blog Anda, misalnya untuk blog Vietnam silahkan ganti dengan vi. 

Nah Jika anda menyimpannya pada gadget sidebar, bisa mengganti lebar widget tersebut menjadi 100% agar lebarnya sesuai dengan lebar sidebar. Silahkan ganti kode width:180px pada class translator-widget menjadi width:100% pada kode CSS di atas. 

Demikian lah penjelasan di atas, jika terdapat kekurangan dan kesalahan mohon di maklumi saja, karena saya masih newbie seperti anda juga.
Jika ada yang hendak ingin di tanya kan silahkan anda bisa klik tombol komentar di bawah ini, saya akan membantu anda segera mungkin, terimakasih sudah berkunjung di blog saya. tunggu kedatangan artikel selanjutnya.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect