Show Hide Google Translator Widget
Salah satu widget yang penting untuk disimpan di blog ialah widget translator atau widget untuk menerjemahkan bahasa yang dipakai di blog ke bahasa lain yang didukung widget tersebut biar sesuai dengn bahasa pengunjung blog.
Salah satu widget translator yang sanggup kita simpan di blog ialah Google Translator. Namun widget Google Translator ini menambah beban saat blog dimuat atau cukup berat loadingnya saat mengakses arahan js-nya. Oleh alasannya ialah itu banyak blog yang tidak memakai widget ini.
Untuk itu aku mencoba menambahkan asynchronous pada javascriptnya biar sanggup dimuat sesudah blog final dimuat sehingga tidak menambah beban loading blog dan ternyata widget tetap berjalan normal.
Untuk memanipulasi tampilan widget translatornya saat widget belum dimuat, aku menggantinya dengan div dan menyembunyikan widgetnya dengan jquery. Untuk memunculkan widgetnya maka div harus di klik menyerupai gambar gif di bawah ini.
Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan copy arahan CSS di bawah ini dan simpan di atas arahan ]]></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 arahan jquery di bawah ini dan simpan di atas arahan </body>
JavaScript
<script type='text/javascript'>
$(function() {
$(".translator").click(function () {
$(".widget-translator").fadeIn();
});
$(".close-translator").click(function() {
$(".widget-translator").fadeOut();
});
});
</script>
Dan silahkan gunakan arahan 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 arahan id pada pageLanguage di atas sesuai dengan bahasa blog Anda, contohnya untuk blog Vietnam silahkan ganti dengan vi.
Jika Anda menyimpannya di gadget sidebar, Anda sanggup mengganti lebar widgetnya menjadi 100% biar lebarnya sesuai dengan lebar sidebar. Silahkan ganti arahan width:180px pada class translator-widget menjadi width:100% pada arahan CSS di atas.
Sumber https://www.kompiajaib.com/
0 Response to "Show Hide Google Translator Widget"
Posting Komentar