Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Cara Membuat Sticky Widget Di Blog

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..

Previous
Next Post »

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *