Cara Menciptakan Widget Sidebar Melayang Dengan Gampang Di Blogspot

Cara Membuat Sticky Sidebar atau Sidebar Melayang di Blog – Widget Sticky atau yang lebih dikenal dengan widget melayang pada sidebar blog ialah tampilan widget melayang pada sidebar kalau halaman di scroll akan selalu melayang, ini berfungsi untuk mengisi kekosongan dikala halaman blog di scroll.

Selain untuk mengisi kekosongan halaman dikala di scroll, widget sticky ini juga sangat bermanfaat untuk memodifikasi tampilan blog anda, pengunjung akan diberikan tampilan menarik pada sidebar blog ketika membaca artikel hingga dengan selesai.

Sticky sidebar atau Widget Sidebar Melayang dapat anda gunakan pada semua widget yang ada di sidebar, contohnya widget popular post, recent post, label, iklan blog dll. Makara anda dapat sesuaikan dengan kebutuhan.

Cara Membuat Sidebar Melayang di Blog

Untuk menciptakan Widget sidebar melayang, element yang diharapkan ialah ID Widget. Makara silahkan tentukan ID tersebut terlebih dahulu sebelum memasangnya diblog. caranya sebagai berikut:

Tentukan widget yang ingin dibentuk Sticky (melayang), kemudian ambil ID widget tersebut. misalkan saya ingin menciptakan sticky pada widget Artikel Terbaru pada blog saya kemudian klik kanan pada title widget dan pilih “Inspect Element“, maka cara mengambil ID widget sebagai berikut:

Cara Memasang Kode Sticky di blog

1. login akun blogger anda.

2. Pilih Template kemudian Edit HTML, kemudian pasang instruksi berikut ini sempurna diatas instruksi ]]></b:skin>

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

3. Lalu Tambahkan instruksi CSS berikut sempurna diats instruksi </body>

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

Ganti semua instruksi #HTML4 dengan ID widget yang akan dibentuk sticky.

4. Selesai dan lihat hasilnya.

Jika cara diatas tidak dapat berjalan, maka anda dapat memakai cara berikut ini untuk menciptakan widget sticky:

Membuat Widget Sticky Pada Sidebar (alternatif)

1. login akun blogger anda.
2. Pilih Template kemudian Edit HTML, kemudian pasang instruksi berikut ini sempurna diatas instruksi </head>

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

<script type='text/javascript'> $(function () { var offset = $("#HTML4").offset(); var topPadding = 0; $(window).scroll(function () { if ($(window).scrollTop() &gt; offset.top) { $("#HTML4").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }) } else { $("#HTML4").stop().animate({ marginTop: 0 }) } }) }); </script>

Ganti #HTML4 dengan ID widget ayng ingin dibentuk melayang (sticky).

3. Save template dan lihat hasilnya.

Bagaimana gampang bukan? kini anda dapat memulai Membuat Widget Sidebar Melayang di Blogspot dengan mudah. Semoga bermanfaat dan selamat mencoba.

Sekian dari saya Cara Membuat Widget Sidebar Melayang dengan gampang di Blogspot biar cara ini bermanfaat bagi kalian , selamat mencoba !

Sumber http://www.robyfazriyana.com/