Cara Membuat Sticky Widget pada Blogger

Cara Membuat Sticky Widget pada Blogger

       Hey sob? kali ini saya akan membahas atau memberikan sebuah cara bagaimana caranya untuk membuat sticky widget pada blog, mungkin nama sticky widget agak asing terdengar namun saya yakin anda pernah melihat widget yang satu ini, yaitu sebuah widget yang dapat mengikuti arah scroll kita kebawah ataupun keatas. Sticky widget juga dapat sebagai penghias dari sebuah blog karena dengan fungsi sticky ini blog anda bisa lebih terlihat canggih. 

       Sticky widget juga biasa dilihat sebagai widget yang dapat melayang mengikuti halaman saat di gulirkan kebawah dan keatas hingga posisi semula. Untuk menambahkan fungsi sticky pada blog sebenarnya cukup mudah, anda bisa mengukti cara berikut ini. Oke langsung saja ke cara pemasangan fungsi sticky pada blog.


Cara Mudah Menambah Fitur Sticky Widget

1. Masuk pada blog anda.

2. Lalu klik "Template" dan pilih "Edit HTML".

3. Jika sudah, anda bisa copy script di bawah ini dan pastekan tepat sebelum "</body>".

<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("HTML2");
//]]>
</script>

#NB : HTML2 adalah ID widget yang ingin di tambahkan fitur sticky. Anda bisa ganti sesuai dengan widget mana yang anda ingin tambahkan fitur sticky. Jika anda bingung anda bisa kunjungi ini : Cara Mengetahui ID Widget

4. Selanjutnya salin kembali script di bawah ini dan pastekan tepat sebelum "]]></b:skin>" atau "</style>".

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

5. Terakhir Simpan Template anda, dan lihat hasilnya.

Oke mungkin itu saja yang bisa saya berikan mengenai artikel ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar anda. Terimakasih.

Previous
Next Post »

► Dilarang meninggalkan link aktif
► Dilarang komentar yang mengandung sara, pornografi dsb.
► Semoga artikel bermafaat
► Terimakasih sudah berkomentar :)
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Powered by Blogger.