Tutorial Membuat Widget Sticky (Float) di Blog

Tutorial kali ini berguna bagi anda seorang blogger. Seringkali kita mengunjungi sebuah blog yang widget/gadget sidebar nya selalu mengambang atau float ketika kita scroll halaman yang sedang terbuka. Kalau belum mengerti widget baca dulu gan

Apa itu Widget ?

Widget adalah sebuah aplikasi yang di pasang pada web atau blog dengan menggunakan beberapa kode. Widget biasanya bisa berupa gambar, flash, video, dan lainnya. Kita pun bisa mendapatkan widget bawaan dan kita pun bisa mendapatkannya dari beberapa situs penyedia widget berbayar atau situs penyedia widget gratisan.

Trik membuat widget sticky akan sangat berguna bagi anda seorang blogger yang telah memasang widget adsense, begitupun juga dengan widget artikel yang populer, sehingga pengunjung blog dapat melihat artikel-artikel menarik lainnya dari blog anda selain itu juga dapa menambah penghasilan adsense anda.

"Sebagai contoh coba lihat sidebar blog ini"

Jika tertarik ikuti langkah membuat widget sidebar sticky berikut :

• Buka Blogger > Template > Edit HTML
• Tekan tombol "Ctrl + F" lalu ketikan "</style>" pada kotak pencarian lalu copy code di bawah ini dan paste pada di atas kode "</style>  tadi.

.makesticking{padding-top:20px;position:fixed!important;top:0;z-index:99}

• Ikuti Langkah kedua lalu ketika </body> pada kotak pencarian selanjutnya copy script di bawah dan paste di atas kode </body>

<script type='text/javascript'>function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top&lt;0?(n.className=a+&quot; makesticking&quot;,n.style.width=i+&quot;px&quot;):n.className=a}var n=document.getElementById(e),s=document.createElement(&quot;div&quot;);n.parentNode.insertBefore(s,n);var

i=n.offsetWidth,a=n.className+&quot; makesticky&quot;;window.addEventListener(&quot;scroll&quot;,t,!1)}

makemeSticky(&quot;HTML6&quot;)</script>

• Ganti ID widget tulisan berwarna merah dengan ID widget yang anda.
• Lalu save template dan lihat hasilnya

Gimana hasilnya, berhasil ngga, nah coba yang satu ini : Menempatkan Dua Widget Berdampingan

Judul: Tutorial Membuat Widget Sticky (Float) di Blog; Ditulis oleh Unknown; Rating Blog: 5 dari 5