Author : UnknownTidak ada komentar
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.
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'>✖</div>
</div>
</div>Untuk pengguna blog yang bukan bahasa Indonesia, silahkan ganti kode id padapageLanguage 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 kodewidth:180px pada class translator-widget menjadi width:100% pada kode CSS di atas.
sumber Kompiajaib.com
trik membuat translate widget di blog show hide,cara membuat widget translate show hide
Posted On : Minggu, 08 Juni 2014Time : 00.19