Cara Mengerjakan Soal Matematika Berbentuk Pecahan Lengkap Dengan Soal Latihan

Kali ini saya akan menunjukkan cara membuat widget melayang ketika di scroll di blogspot atau blogger.  Alasan saya membuat widget melayang karena umumnya artikel di blog saya cukup panjang sehingga ketika kita melakukan scroll ke bawah panel sebelah kanan terlihat sepi.

Dengan adanyanya widget melayang ini sebenarnya bisa kita manfaatkan untuk meletakkan iklan melayang atau widget lain yang mungkin menurut kita bisa bermanfaat untuk pengunjung atau kita sebagai pemilik blog.

Misalkan saya disini membuat widget melayang pada Popular Post, tujuannya untuk meningkatkan jumlah halaman yang dikunjungi oleh pengunjung.

Caranya sebenarnya sangat mudah cukup menempelkan script HTML dibawah ini pada template blog anda, dan lakukan kostumisasi sesuai kondisi pada blog anda.

Cara Membuat Widget Melayang Ketika di Scroll di Blogspot

1. Cara Melihat Kode Widget (ID Widget)

Namun sebelum kita mulai, hal dasar yang perlu kita lakukan adalah mengetahui ID Widget yang akan kita buat melayang.

Caranya buka blog anda dan pilih widget yang akan kita buat melayang, selanjutnya klik kanan lalu pilih inspect halaman. perhatikan gambar berikut ini:

kemudian akan muncul seperti gambar dibawah ini

Arahkan kursor pada kode popular post seperti gambar di atas, maka akan muncul ide widget seperti di sebelah kiri gambar.

ID widget untuk gambar di atas adalah  #PopularPosts1 (sertakan #)

Setelah mengetahui ID Widget yang akan dibuat melayang, kita perlu menempelkan kode CSS dan kode HTML pada template blog.

2. Menempelkan Kode CSS dan HTML pada template

Langkah-langkahnya adalah

1. Masuk ke dashboard blogger
2. Pilih menu theme
3. Pilih menu customize > edit HTML
4. Cari kode  ]]></b:skin> , dan letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

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

Penjelasannya: 

Jika nanti widget anda ternyata posisinya terlalu ke atas anda bisa merubah angka 10px ini sesuai kebutuhan, di blog saya ini posisi dari atas saya rubah ke 50px karena tertutup container menu header.

Sedangkan jika pada saat di scroll widget anda terlalu lebar atau terlalu sampit, ukurannya bisa disesuaikan dengan merubah width dari angka 300pixel, bisa dikurangi atau bisa ditambah.

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

Penjelasan:

Pada kode diatas anda cukup mengganti kode berwarna merah yaitu #idwidgetdisini dengan ID Widget yang sudah anda tentukan. Saya sudah jelaskan cara melihat ID Widget di atas.

Tidak terlalu susah kan untuk membuat widget melayang di blogspot? 

Jika tidak berhasil anda bisa mencoba cara lain, karena memang tidak semua template blogspot itu sama. Umumnya cara ini berhasil di template-template baru.

silahkan tinggalkan komentar jika berhasil ataupun tidak. mohon maaf jika ada kesalahan.

Sumber : 

• http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
• http://www.kompiajaib.com/2012/11/cara-membuat-stiky-sidebar-atau-sidebar-melayang.html