Show Hide Google Translator Widget

Show Hide Google Translator Widget

Bola Hero Gawai

Show Hide Google Translator Widget

Salah satu widget yang penting untuk disimpan di blog adalah widget translator atau widget untuk menerjemahkan bahasa yang digunakan di blog ke bahasa lain yang didukung widget tersebut agar sesuai dengn bahasa pengunjung blog. 

Salah satu widget translator yang bisa kita simpan di blog adalah Google Translator. Namun widget Google Translator ini menambah beban ketika blog dimuat atau cukup berat loadingnya ketika mengakses kode js-nya. Oleh karena itu banyak blog yang tidak menggunakan widget ini.

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

Untuk memanipulasi 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 bawah ini.

Show Hide Google Translator Widget


Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

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;}

Kemudian 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>

Dan silahkan gunakan kode HTML di bawah ini, silahkan simpan di mana Anda ingin menampilkan widgetnya.

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>

Untuk pengguna blog yang bukan bahasa Indonesia, silahkan ganti kode id pada pageLanguage di atas sesuai dengan bahasa blog Anda, misalnya untuk blog Vietnam silahkan ganti dengan vi

Jika Anda menyimpannya di gadget sidebar, Anda bisa mengganti lebar widgetnya 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. 

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

44 Comments Add Comment

Pertamax Gan :D Boleh Juga Nih Kang .. Entar saya Pasang Dehh .. :-bd

Balas

Silahkan dicoba mas :) sekarang jadi lumayan enteng widgetnya :)

Balas

Wah, ketinggalan berita nich, Kalau blog saya marketnya lokal menurut Kang Adhy apa juga perlu dipasang Translate, karena kebanyakan tutorial di sini satu persatu telah saya pratekan,....... =D
Hanya kawatir Kang, nanti loading blog saya jadi lelet... @@,

Balas

oke deh mas, makasih udah sharing :)

Balas

menjadi lebih praktis dan rapi ya mas kalau ada show hide nya :D makasih telah berbagi :)

Balas

met malem kang Adhy :D wah lama ngk mampir sy ke kompiajaib ternyata byk berubah euy makin jreng ja hehehe... sy ijin belajar mempelajarinya kang, soalnya masih pake versi lama py kang Adhy (msh cucok).

ehem ternyata sudah pake chitika nie ye cie cie cie... ngikut juga ah :P makasi kang atas pembelajarannya :D

Balas

Lha itu dia .. Yang Penting Entengnya .. Jadi Mudah Di bawa ya Kang Hehehe :D

Balas

wah kreatif sekali mas :-d

Balas

Saya mau cari dulu code tersebut ya Mas maklum saya msh newbie.

Balas

kayanya kalau hode translate dipasangnya dikompi males, bakalan rada ribet nih...bukan apa apa tah, kalau udah mulai utak atik jeroan, biasanya terus merembet,,,sagala weh diobrak abrik, bisa 3 - 4 hari mulek ngoprek terus...sayah mah gituh kang.

contohnya saya kompres, eh visitornya jadi nyungsep turun jauh banget tah kang....kumaha hayo?!

Balas

kalau di simpan di Menu bar gimana Mas

Balas

Setelah saya coba sekarang Google translator ini tidak mengganggu loading blog setelah menggunakan asynchronous mas. Silahkan dicoba aja :) siapa tahu banyak pembaca dari LN mas :)

Balas

Sama-sama mas :)

Balas

Betul mbak jadi lebih rapih dan yang penting sekarang menjadi tidak mengganggu loading blog karena telah dipasang asynchronous.

Balas

Hehehehe iya mas nyoba cari recehan :)

Balas

Hehehehe makasih mas :)

Balas

Silahkan hehehe :)

Balas

Maksudnya dikompres gimana kang? maksudnya kode css dihost kang? justru dengan dihosting di pihak ketiga tetap saja menjadi beban loading karena harus mengaksesnya dulu, memang size blog berkurang tapi malah masalah lain muncul yaitu menjadi beban loading blog ketika mengakses hostingannya kang.

Balas

coba simpan di bawah kode </ul> dari menu tersebut.

Balas

wah mantep nih kang bisa di sembunyin :D

Balas

Boleh juga ni mas, kalau blognya mau go internasional, hehehe

Balas

saya kalau naruh kode di atas /body pasti muncul pesan error mas...

Balas

Kalau menyimpan kode javascript seperti ini di atas kode </body> error
<script type='text/javascript'>
$(function() {
$(".translator").click(function () {
$(".widget-translator").fadeIn();
});
$(".close-translator").click(function() {
$(".widget-translator").fadeOut();
});
});
</script>


Silahkan tambahkan kode //<![CDATA[ dan penutupnya menjadi seperti ini
<script type='text/javascript'>
//<![CDATA[
$(function() {
$(".translator").click(function () {
$(".widget-translator").fadeIn();
});
$(".close-translator").click(function() {
$(".widget-translator").fadeOut();
});
});
//]]>
</script>

Balas

Hehehehehe iya mas untuk memanipulasi ketika widgetnya belum muncul karena asynchronous :)

Balas

Heheheehe iya mas :)

Balas

Makin kreatif aja nih Kang Adhy. Google translate nya bisa di show dan hide-kan. Keren. Ini pastinya ringan dan nggak membebani loading ya

Balas

Betul mas :) saya tambahin asynchronous pada js-nya :)

Balas

weh ...
keren kang hasilnya ...
lagian juga gak ngeberatin loading :)

Balas

kabar anak gmana om? udah baikan lom...

kreatip nih om..hehehe

Balas

terima kasih kang tutorial show hide google translator widget ini bisa mengurangi beban blog dan tentunya sangat berguna buat saya pribadi :)

Balas

Iya mas jadi tidak membebani blog :)

Balas

Alhamdulillah udah baikan mas :)
hehehehe makasih :)

Balas

Mudah-mudahan bisa bermanfaat mas :)

Balas

kurang bagus kalo di showhide-kan.. serasa klik 2 hingga 3 kali...

Balas

Betul mas memang harus 3x klik, ini hanya salah satu alternatif untuk tampilannya :) yang terpenting adalah penggunaan asynchronous-nya agar tidak mengganggu loading blog.

Balas

Saya juga hanya bisa mendoakan saja mas. Semoga lekas sembuh :)

Balas

Tips dari Akang pasti selalu keren, dan tidak bisa diragukan lagi :-bd

Balas

Keren banget mas :-d tutornya emang mantap =)D

Balas

kayaknya lebih keren ya mas kalau ditaruh dibagian menu drop.

Balas

geus tong sedih, tuh aya post anyar, HADE punya ;)

Balas

saya mau menempatkannya di bagian Breadcrumb gimana Ya, Mas

Balas

Mas maaf ganggu punya saya kenapa nggak muncul ?

Balas

artikel yang bermanfaat, tapi knapa tidak auto hide kaya punya mas. bolehkah saya meminta script Translate auto hide mas?
contact saya https://www.facebook.com/shalimDHAIMARU

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×