Cara Membuat Gadget Melayang di Blog

Membuat gadget atau widget blog menjadi melayang merupakan hal yang sangat bermanfaat ketika sobat ingin pengunjung blog terus melihat gadget tersebut, contoh yang paling banyak digunakan adalah gadget sosial media (facebook like, google+ follower ataupun follow twitter) seperti yang saya gunakan pada Dewa Inside Blog ini yang berada disamping blog.

Mungkin Sobat juga tertarik:
a. Memberi Warna Background Judul Gadget Blog
b. Menambah Gadget disamping Header Blog
c. Menampilkan/Menyembunyikan Gadget di Blog

Apakah Oke Digunakan pada Gadget Google Adsense?

Tidak boleh! Saya berani bilang tidak boleh karena saya baca Modification of Adsense ad code (Translate apabila sobat kurang paham bahasa inggris) disitu tertulis jelas salah satu teknik yang harus dihindari adalah "Floating ads or units that slide to attract unwarranted attention" membuat adsense melayang. Coba sobat lihat blog/website terkenal iklan google adsense-nya pasti statis saja. Lagipula saya lebih mencari traffic blog dengan menggunakannya pada gadget sosial media.

Cara Memasang:
1. Lihat ke Tata Letak --> Edit gadget yang ingin ditampilkan.

Disini hanya untuk melihat ID dari gadget tersebut. Klik pada bar url dan cari pada bagian kanan bar. Copy atau ingat ID Gadget yang ingin sobat buat melayang.

2. Lihat ke Template --> Edit HTML, klik kiri pada kotak Edit HTML dan cari (CTRL+F) kode:

]]></b:skin>

Copy dan Paste kode CSS berikut diatas/sebelumnya:

.ET_floating {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}

3. Cari kode:

</body>

Copy dan Paste kode berikut diatas/sebelumnya:

<script>

// Sticky widget

// EasyTins Tutorial

//<![CDATA[

ET_makeSticky("HTML1");

function ET_makeSticky(elem) {

    var ET_sticky = document.getElementById(elem);

    var scrollee = document.createElement("div");

    ET_sticky.parentNode.insertBefore(scrollee, ET_sticky);

    var width = ET_sticky.offsetWidth;

    var iniClass = ET_sticky.className + ' ET_sticky';

    window.addEventListener('scroll', ET_floating, false);

    function ET_floating() {

        var rect = scrollee.getBoundingClientRect();

        if (rect.top < 0) {

            ET_sticky.className = iniClass + ' ET_floating';

            ET_sticky.style.width = width + "px";

        } else {

            ET_sticky.className = iniClass;

        }

    }

}

//]]>

</script>

    Note: Ganti HTML1 yang berwarna merah dengan ID Gadget sobat yang ingin dibuat melayang.

4. Simpan Template

Coba lihat blog sobat dan scroll kebawah apakah gadget-nya sudah melayang mengikuti scroll kebawahnya. Apabila ada pertanyaan silahkan tinggalkan pada kolom komentar.

Selamat mencoba dan semoga berhasil.