Info Tentang Show Hide Button Translate Di Blog Update Terbaru 2017 Gratis

Sedikit Info Seputar Show Hide Button Translate Di Blog Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Show Hide Button Translate Di Blog, kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Tips And Trick Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Show Hide Button Translate Di Blog Full Update Terbaru
link: Show Hide Button Translate Di Blog

Artikel Terbaru Show Hide Button Translate Di Blog Update Terlengkap 2017

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.

DEMO ON JSFIDDLE

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

Itulah sedikit Artikel Show Hide Button Translate Di Blog terbaru dari kami

Semoga artikel Show Hide Button Translate Di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Show Hide Button Translate Di Blog