Apa itu 'Floating Gadget'? Baru-baru ini saya belajar tentang cara untuk menyediakan floating gadget pada sidebar blog. Contoh paling dekat anda boleh lihat pada blog ini, jika anda scroll ke bawah, gadget yang terakhir akan ikut scroll ke bawah dan tidak membiarkan side bar anda kelihatan kosong. Inilah yang saya katakan sebagai floating gadget.
Ada beberapa kebaikan menggunakan floating gadget
- Side bar tidak kelihatan kosong terutamanya jika artikel yang anda tulis amat panjang.
- Pendapatan Google Adsense meningkat (jika anda letakkan Google Adsense pada gadget tersebut)
Walaubagaimana pun, jika tersalah pasang atau digunakan dengan tidak sesuai, blog anda mungkin akan kelihatan pelik dan tidak teratur.
Ok.
Untuk menyediakan floating gadget, kita perlu tambah kod html dalam template Blogger kita. Bagi yang tidak biasa untuk ubah kod html blog anda, saya nasihatkan untuk buat backup template anda terlebih dahulu sebelum mencuba. Anda boleh baca cara backup template blog di sini - Cara Memasang Template Blog.
Pertama sekali, anda perlu tahu HTML ID bagi gadget yang anda nak jadikan floating gadget. Anda boleh ketahui HTML ID bagi gadget anda dengan buka pautan Layout dan kemudian tekan bahagian Edit pada gadget yang anda nak jadikan floating gadget. Anda akan dapat lihat HTML ID di bahagian address bar gadget anda.Â
Ingat dan catatkan HTML ID untuk gadget anda tadi.
Kemudian, buka pautan Template dan tekan pautan Edit HTML. Kemudian cari kod </body> pada kod HTML anda. Cara mudah untuk cari adalah dengan menggunakan Ctrl + F dan taip kan </body>. Komputer akan carikan di mana kod tersebut tanpa perlu anda scroll baris demi baris.
Ok?
Kemudian anda perlu masukkan kod di bawah ini betul-betul sebelum kod </body> yang anda jumpa tadi.
<script>
//<![CDATA[
bs_makeSticky("HTML ID");
function bs_makeSticky(elem) {
   var sticky = document.getElementById(elem);
   var scrollee = document.createElement("div");
   sticky.parentNode.insertBefore(scrollee, sticky);
   var width = sticky.offsetWidth;
   var iniClass = sticky.className + ' sticky';
   window.addEventListener('scroll', sticker, false);
   function sticker() {
       var rect = scrollee.getBoundingClientRect();
       if (rect.top < 0) {
           sticky.className = iniClass + ' sticker';
           sticky.style.width = width + "px";
       } else {
           sticky.className = iniClass;
       }
   }
}
//]]>
</script>
|
Tukarkan HTML ID dengan HTML ID untuk gadget yang anda nak jadikan floating gadget (yang telah anda catatkan tadi). Kemudian tekan Save.
Kini anda boleh buka blog anda dan lihat sama ada gadget yang ada pilih dah jadi floating gadget atau tidak :-)Â
Jika tidak menjadi boleh beritahu saya ye. Sebab saya ada cuba beberapa html kod juga. Dan ini adalah kod html yang sesuai dengan blog saya. Ada kemungkinan juga html kod ini tidak sesuai dengan template blog anda. Apa yang penting adalah, sebelum mengubah apa-apa kod dalam html template anda, pastikan backup sudah dibuat terlebih dahulu.
Terima kasih kerana membaca Cara Sediakan Floating Gadget Pada Blogger. Nyatakan dalam ruangan komen sama ada kod tersebut boleh digunakan atau tidak ye :-)
Tiada ulasan:
Catat Ulasan