Cara Membuat Widget Sticky Di Blog ~ Trelo-Skato

Tuesday 15 September 2015

Sobat Skato sekalian, pada postingan kali ini saya akan berbagi trik bagaimana membuat atau memasang widget Sticky di blog , fungsi sticky ini bertujuan agar ketika pengunjung men scroll UP halaman anda maka widget ini akan tetap pada posisinya dan sebaliknya jika pengunjung men Scroll DOWN maka widget ini akan kembali di posisinya semula.
Trik kali ini saya beri judul Cara Membuat Widget Sticky Di Blog di halaman yang memasang fungsi widget ini akan tampak menarik, dan biasanya dipakai untuk widget sosial media atau untuk iklan.
Mari kita praktekan trik nya dengan mengikuti proses yang saya jelaskan dibawah ini.

Cara Membuat Widget Sticky Di Blog

Demo

Simak langkah² dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

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

5. Tekan Ctrl+F cari kode </body>
6. Lalu tambahkan kode Javascript berikut ini tepat diatas kode </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("HTML5");
//]]>
</script>

7. Silahkan ganti HTML3 dengan nama widget yang akan anda buat menjadi Sticky.
8. Save Template.

Keterangan:
Untuk mengatur posisi widget pada tampilan di blog silahkan edit kode CSS diatas.

10. Selesai dan selamat mencoba.