Cara Mudah Membuat Sticky Widget Di Sidebar Blog

Sticky Widget

Cara Mudah Membuat Sticky Widget Di Sidebar Blog - Selamat siang. maaf ya sekarang mimin jarang posting soalnya lagi ada ujian berturut turut nih. Berhubung mimin ada waktu kita bahas tentang Cara Mudah Membuat Sticky Widget Di Sidebar Blog yuk? :D Kita langsung ke tutorial aja ya.. soalnya mimin lagi sibuk nih langsung aja tanpa basa basi lagi cekidott..

Simak baik² ya sobat! 

1. Masuk ke Blogger

2. Pilih Template > Edit HTML

3. Tambahkan kode dibawah ini tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. Jangan disimpan dulu, Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>

.sticky { position:fixed; top:5px;/* jarak dari atas*/ z-index: 100; }

5. Tambahkan juga kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>$(document).ready(function() { var stickyWidgetTop = $('#HTML1').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('#HTML1').addClass('sticky'); } else { $('#HTML1').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script>

KETERANGAN : 

Ganti Tulisan #HTML1 dengan ID Widget agan yang ingin di Sticky (melayangkan). untuk mendapatkan ID Widgetnya agan bisa melihat contoh dibawah ini 

Contoh Untuk Mendapatkan ID Widget

6. Simpan Template dan Lihat Hasilnya :D

Sekian dulu gan pelajaran kita tentang Cara Mudah Membuat Sticky Widget Di Sidebar Blog semoga bermanfaat untuk sobat semua. Terimakasih sebelumnya atas kunjungannya ^_^ See u next post! 

Tweet