CARA MEMBUAT HEADER BLOG MENJADI STICKY ATAU MELAYANG

Memodifikasi tampilan blog merupakan sebuah upaya yang dilakukan untuk memberikan kesan menarik sehingga ketika diakses para pengunjung blog tidak akan cepat merasa bosan berlama-lama berada di situs yang kalian kelola.

Ada banyak cara yang bisa dilakukan untuk mempercantik tampilan blog diantaranya adalah cara membuat header blog menjadi sticky atau melayang dibagian atas layar perangkat yang digunakan sekalipun halaman pada layar perangkat tersebut digulir ke atas ataupun ke bawah.

Efek header blog sticky ini sempat populer beberapa tahun yang lalu,banyak para blogger yang menerapkan efek tersebut untuk mempercantik tampilan blognya masing-masing. Dan buat kalian yang mungkin ingin juga menerapkan efek sticky seperti pada header blog yang sedang kalian kunjungi ini,silahkan ikuti langkah-langkahnya di bawah ini.

Cara membuat header blog menjadi sticky.

Silahkan copy dulu kode script di bawah ini

<script>

    //<![CDATA[

    bs_makeSticky("HEADER");

    function bs_makeSticky(elem) {

        var bs_sticky = document.getElementById(elem);

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

        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);

        var width = bs_sticky.offsetWidth;

        var iniClass = bs_sticky.className + ' bs_sticky';

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

        function bs_sticking() {

            var rect = scrollee.getBoundingClientRect();

            if (rect.top < 0) {

                bs_sticky.className = iniClass + ' bs_sticking';

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

            } else {

                bs_sticky.className = iniClass;

            }

        }

    }

    //]]>

    </script>

    <style>

    .bs_sticking {position:fixed; top:0; z-index:9999;}

    </style>

Langkah selanjutnya buka akun blogger kemudian pilih menu tema lalu klik edit html.

Cari kode </body> dan letakan kode script yang sudah di copy tadi di atas kode </body> tersebut.

Sebelum menyimpannya,silahkan kalian ubah tulisan yang berwarna merah ( HEADER ) sesuai dengan id header blog kalian. Kalian bisa melihatnya pada barisan kode html dibagian widget header. Jika sudah selesai,silahkan klik simpan dan lihat hasilnya pada tampilan blog kalian.