Hey sob? kali ini saya akan membahas atau menawarkan sebuah cara bagaimana caranya untuk menciptakan sticky widget pada blog, mungkin nama sticky widget agak aneh terdengar namun saya yakin anda pernah melihat widget yang satu ini, yaitu sebuah widget yang sanggup mengikuti arah scroll kita kebawah ataupun keatas. Sticky widget juga sanggup sebagai penghias dari sebuah blog alasannya dengan fungsi sticky ini blog anda sanggup lebih terlihat canggih.
Sticky widget juga biasa dilihat sebagai widget yang sanggup melayang mengikuti halaman dikala di gulirkan kebawah dan keatas sampai posisi semula. Untuk menambahkan fungsi sticky pada blog sebetulnya cukup mudah, anda sanggup mengukti cara berikut ini. Oke pribadi saja ke cara pemasangan fungsi sticky pada blog.
Cara Praktis Menambah Fitur Sticky Widget
1. Masuk pada blog anda.
2. Lalu klik "Template" dan pilih "Edit HTML".
3. Jika sudah, anda sanggup copy script di bawah ini dan pastekan sempurna sebelum "</body>".
<script type='text/j4vascript'>
//<![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>
//<![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 yaitu ID widget yang ingin di tambahkan fitur sticky. Anda sanggup ganti sesuai dengan widget mana yang anda ingin tambahkan fitur sticky. Jika anda gundah anda sanggup kunjungi ini : Cara Mengetahui ID Widget
4. Selanjutnya salin kembali script di bawah ini dan pastekan sempurna 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;}
#HTML2 .widget-content {padding:0;margin:auto;}
5. Terakhir Simpan Template anda, dan lihat hasilnya.
Oke mungkin itu saja yang sanggup saya berikan mengenai artikel ini, biar dengan apa yang sudah saya berikan ini sanggup bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapat isu serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan sanggup isi pada kolom komentar anda. Terimakasih.
Sumber http://www.blogsejutaumat.com/