Sunday 5 April 2015

Cara Membuat Widget Menempel Ketika Di Scroll

Membuat salah satu widget menempel ketika di scroll - Kali ini saya akan membagikan cara membuat widget menempel / Sticky widget di blog. Cara ini tidak sulit, hanya menambah 2 kode di dalam template. Membuat efek Sticky pada salah satu widget ini bertujuan untuk memudahkan pengunjung jika ingin menekan tombol pada widget blog kamu sekaligus mempercantik dan memperindah blog.
Bagi yang ingin membuat menu navigasi melayang/menempel, Baca : Cara Membuat Menu Navigasi Menempel Saat Di Scroll.

Hasil gambar untuk sticky widget

Oke, sekarang untuk membuat widget tetap menempel dan melayang di blog. Silahkan ikuti cara-cara berikut ini.

1. Masuk ke blogger
2. Pilih Template lalu Edit Html
3. Cari kode ]]</b:skin> dan letakan kode berikut di atasnya

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


4. Selanjutnya, cari kode </body> dan letakan kode berikut di atasnya

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

*Keterangan : ganti tulisan warna BIRU dengan ID widget kamu. Baca : Cara mengetahui ID widget blog.

5. Setelah itu simpan template dan lihat blog

Sekian artikel kali ini, semoga bisa membawa manfaat. Terima kasih dan selamat berkreasi!

4 komentar:

  1. cara merubah tampilan menu menjadi warna hijau gan??

    ReplyDelete
    Replies
    1. silahkan cari kode class elemen menunya gan. Biasanya sih bernama .nav atau .menu bila template bawaan dari blogger. cari kode lalu diatasnya taruh kode

      .nav atau .menu{
      color:green; (Untuk mengubah warna tulisan)
      background:green; (untuk mengubah background link)
      }

      Delete

Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!