Google Translate Dengan Efek Jquery Lightbox Di Blog

Widget Google Translate sekarang ini seakan menjadi widget yang wajib dipasang di Blog, Mengapa? karena pengunjung Blog kita tidak hanya berasal dari satu negara, yang berarti juga menggunakan bahasa yang berbeda - beda pula. Adanya Widget Google Translate ini akan mempermudah para pengunjung Blog untuk memahami artikel yang mereka baca.

Tapi, kali ini penulis akan membagikan Widget Google Translate yang berbeda dengan widget google translate biasa, itu karena Widget Google Translate yang ini sedikit ditambah dengan sentuhan Jquery yang membuatnya terkesan lebih bagus dan apik.

Berikut cara pemasangannya :

1. Login ke akun Blogger Anda
2. Pilih bagian Tata Letak.

3. Kemudian klik Tambah Gadget > HTML/JavaScript

4. Copy kemudian paste kode berikut ke dalamnya  :

<!-- Start Translator -->
<script src='http://script-idepelajar.googlecode.com/files/jquery-latest.pack.js'  type='text/javascript'></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var idepelajarHeight = $(document).height();
var idepelajarWidth = $(window).width();
//Set heigth and width to idepelajar to fill up the whole screen
$('#idepelajar').css({'width':idepelajarWidth,'height':idepelajarHeight});
//transition effect
$('#idepelajar').fadeIn(1000);
$('#idepelajar').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#idepelajar').hide();
$('.window').hide();
});
//if idepelajar is clicked
$('#idepelajar').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script><style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#idepelajar {
position:fixed;
left:0;
top:0;
z-index:700;
background-color:#000;
display:none;
}#wadah .window {
position:fixed;
left:0;
top:0;
width:0px;
height:0px;
display:none;
z-index:9999;
padding:0px;
}#wadah #translate {
background:url() no-repeat 0 0 transparent;
width:280px;
height:0px;
padding:0px 0 50px 137.5px;
}#tutupan {
padding:0px 0 0 0;
}</style><ul><left>
<a href='#translate' name='modal'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHNoJ39CjugbsKTu76JZHauOC1v_kE25dTd4QghLmkUnw3rMBckRAvbCEP3EzeRbS5gD1DvJUpTLP9SS6gn4z-c3fyo0Euhvaq7ZlcTDChknLlAbQzO-5smMY78RYAd1s81sSzixLfrvWI/s1600/SelectLanguage.gif' title='Select Language - Translate' width=''/></a>
</left><div dir='ltr' style='text-align: right;' trbidi='on'></div></ul><div id='wadah'>
<!-- Start Translate --><div class='window' id='translate'>
<div id='google_translate_element'></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
<!-- idepelajar END -->
</div>
</div><!-- End idepelajar --><div id='idepelajar'></div>
<!-- End of Translator -->

Catatan : Kode yang berwarna ORANGE dapat Anda re-Upload pada Google Code untuk mempercepat loading Blog Anda, namun jika Anda memilih untuk tetap menggunakan Kode diatas, Tolong Anda beri rating pada http://code.google.com/p/idepelajar/ agar Kode diatas tetap dapat bertahan.

Bagaimana? mudah kan? Penulis berharap artikel cara memasang Google Translate Dengan Efek Jquery Lightbox ini dapat bermanfaat. Semoga berhasil!

Google Translate Dengan Efek Jquery Lightbox Di Blog
Ditulis Oleh:
Doedja
Rating: 5 Terima kasih telah membaca! Bila Anda ingin copy paste artikel ini, silakan izin terlebih dahulu pada penulis, serta jangan lupa untuk menyertakan link sumbernya. Blogger Indonesia punya etika kan? Salam Blogger Indonesia!. <a href='http://idepelajar.blogspot.com/2011/09/google-translate-efek-jquery-lightbox.html'>Google Translate Dengan Efek Jquery Lightbox Di Blog</a>