Cara Memasang Fungsi Sticky Widget di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Memasang Fungsi Sticky Widget di Blog, Postingan ini masih berhubungan dengan Artikel Widget.

Baca juga:

Cara Memasang Fungsi Sticky Widget di Blog

Advertisement

Membuat sticky widget atau widget welayang - Halo kawan, sebelumnya saya sudah membagikan cara untuk membuat halaman error 404 di blog, bagi sobat yang ingin menerapkannya pada blog masing-masih silahkan baca artikelnya, silahkan cari pada kotak pencarian blog ini dengan kata kunci error 404. Oke langsung saja kita menuju ke pokok pembahasan, sebelumnya saya memberikan langkah-langkah dari pemasangan fungsi sticky widget ini, saya akan sedikit menjelaskan fungsi dari pemasangan sticky widget.

Sticky widget atau sering di sebut dengan widget melayang. Sesuai dengan sebutan tersebut, maka ketika anda menerapkan metode ini dalam template blog anda, dan ketika halaman blog anda di gulir ke bawah, maka pada bagian widget tertentu sesuai dengan ID Widget yang anda terapkan, widget tersebut akan melayang mengikuti pergerakan halaman anda, dan ketika halaman blog anda di gulir ke atas widget tersebut akan kembali pada posisinya semula. untuk lebih jelasnya silahkan lihat gambar di bawah ini. Perhatikan widget pada bagian sidebar sebelah kanan halaman.

Bagi anda yang ingin menerapkan sticky sidebar widget tersebut anda bisa mengikuti langkah langkah di bawah ini.

Cara Memasang Fungsi Sticky Widget di Blog

1. Silahkan sobat masuk ke dalam halaman blogger sobat.
2. Kemudian buka Template --> Edit Template
3. Selanjutnya, Silahkan cari kode ]]></b:skin> , gunakan CTRL+F untuk memudahkan pencarian, stelah kode tersebut anda temukan, selanjutnya letakkan kode CSS di bawah ini tepat di atas kode tersebut.

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("ID WIDGET");
//]]>
</script>  

Note : Silahkan ganti ID Widget sesuai dengan ID Widget anda.

4. Langkah selanjutnya, silahkan cari kode </body> , dan letakkan kode di bawah ini tepat di atas kode tersebut.

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
ID WIDGET .widget-content {padding:0;margin:auto;}  

Keterangan : silahkan ganti tulisan ID WIDGET di atas sesuai dengan ID widget yang anda tentukan.

5. Silahkan simpan template anda, dan silahkan lihat hasilnya.

Untuk mengaktifkan fungsi sticky widget pada menu horisontal, silahkan gunakan kode di bawah ini.

Mengaktifkan Fungsi Sticky Widget pada Menu Horisontal

1. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.siabditop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)} 

Note : Silahkan ganti ID Widget sesuai dengan ID Widget anda.

Oiya, apabila sobat masih mengalami permasalahan dengan cara di atas, sobat dapat menggunakan cara yang lebih simple di bawah ini.

Cara Membuat Sticky Widget Versi 2

1. Pertama silahkan sobat masuk ke halaman blog sobat.
2. Kemudian, sialahkan masuk ke halaman template -> edit template.
3. Selajutnya silahkan masukkan kode di bawah ini tepat di atas kode </body>

<script>
//<![CDATA[
bs_makeSticky("WIDGET_ID");
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> 

Keterangan : silahkan ganti tulisan ID Widget dengan ID widget anda.

4. Setelah itu silahkan sobat save dan dilhat hasilnya :)

Demikianlah artikel kali ini mengenai cara memasang fungsi sticky widget pada blog, apabila sobat memiliki pertanyaan silahkan tinggalkan pada kotak komentar. Selamat mencoba :)