Cara Membuat Sticky Widget Di Blog

Sabtu, Februari 7th, 2015 - Tutorial Blog

Tags :

Cara Mudah Membuat Sticky Widget Di Blog – Stcky widget adalah kondisi dimana widget tidak akan hilang atau ikut ke atas ketika dscrool ke bawah. jadi widget akan tetap terlihat walaupun kita scrool ke bawah. Pasti sobat juga pernah menemukan ketika berkunjung di sebuah blog, beberapa template dari blog yang telah anda kunjungi terdapat widget seperti like facebook ataupun widget lainya ketika di scrool ke bawah widget tersebut tetap terlihat dan tidak menghilang ke atas. Membuat sticky widget sebenarnya banyak caranya, namun pada kesempatan kali ini kita akan membahas Cara Mudah Membuat Sticky Widget Pada Blog.

Bagi kamu sob yang belum tahu tentang membuat sticky di blog, langsung saja kita masuk ke pokok pembahasan kita kali ini. Silahkan simak langkah-langkah cara membuatnya berikut ini.

membuat sticky widget di blog dengan mudah

Tutorial Membuat Sticky Widget Di Blog

1. Masuk ke blog sobat terlebih dahulu
2. Kemudian masuk ke Template
3. Lalu pilih Edit Template
4. Cari code script </body> gunakan CTRL+F untuk mempermudah pencarian
5. Jika sudah ketemu, Letakan code script di bawah ini tepat di atas code </body>

<script>
//<![CDATA[
bs_makeSticky(“HTML7”);
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 {background:#ffffff !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style> 

Keterangan.

  • Ganti tulisan yang berwarna merah (HTML7) dengan id widget yang akan anda buat sticky

 Begitulah sob panduan tentang cara membuat sticky widget pada sebuah blog. Mudah-mudahan dapat membantu anda. Bagi kamu sob yang belum tahu cara membuatnya silahkan ikuti langkah-langkah di atas. Selamat mencoba dan semoga bermanfaat..

Share this article
Previous Post « « Cara Mudah Membuat Efek Salju Di Blog and Tablet 7-Inci Yang Stylish dan Ringkas dengan Harga Terjangkau » » Next Post

Cara Membuat Sticky Widget Di Blog

Cara Membuat Sticky Widget Di Blog | wongcilik2017 | 4.5