Cara Membuat Widget Sidebar Melayang di Blogspot
13 Juli 2019
2 Komentar
Cara Membuat Widget Sidebar Melayang di Blogspot atau Widget Sticky yang lebih dikenal dengan widget melayang pada sidebar blog atau website. Widget Sidebar Melayang adalah tampilan widget melayang pada sidebar blog jika halaman discroll akan selalu tetap melayang. Dengan widget Sticky ini dapat berfungsi untuk mengisi kekosongan sidebar saat halaman blog discroll.
Keuntungan lain selain mengisi kekosongan halaman saat discroll adalah bahwa widget sticky ini juga sangat bermanfaat untuk memodifikasi tampilan blog. Sehingga pengunjung akan diberikan pengalaman tampilan menarik pada sidebar blog ketika membaca artikel sampai dengan selesai. Kemudian bagaimana cara membuat widget sidebar melayang di blogspot Anda?
Widget Sidebar Melayang atau Sticky sidebar dapat kita gunakan pada semua widget yang ada di sidebar, misalnya widget postingan populer, postingan terbaru, label, archive, iklan blog, widget html, profil blog, dan lainnya. Sebaiknya sesuaikan dengan kebutuhan dan perhatikan posisinya.
Cara Membuat Widget Sidebar Melayang di Blogspot
Untuk membuat Widget Sticky atau Widget sidebar melayang memang terlihat cukup rumit, element yang dibutuhkan adalah ID Widget. Jadi silahkan tentukan ID tersebut terlebih dahulu sebelum memasangnya diblog. ID Widget dapat kita lihat melalui "Inspect Element" di web browser.
Tentukan widget yang akan dibuat Sticky, kemudian ambil ID widget tersebut, misalkan akan membuat sticky pada widget recent post atau Artikel Terbaru. Maka silahkan buka blog di browser kemudian klik kanan pada title widget dan pilih "Inspect Element", dari situ kita ambil ID widgetnya.
Berikut adalah bebrapa cara membuat widget sidebar melayang di blogspot secara lengkap yang dapat Anda lakukan.
1. Cara Memasang Kode Sticky di Blog
a. Login akun blogger dashboard.b. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode ]]></b:skin>
.sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;}
c. Kemudian Tambahkan kode CSS berikut tepat di atas kode </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>
Pada script di atas, pastikan ganti semua kode #HTML4 dengan ID widget yang akan dibuat sticky.
Jika cara di atas tidak bisa berjalan dengan baik, kita masih bisa menggunakan cara alternatif berikut ini untuk membuat widget sticky.
2. Cara Alteratif Membuat Widget Sticky Pada Sidebar Blog
a. Login akun blogger dashboard.b. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode </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() > offset.top) {
$("#HTML4").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#HTML4").stop().animate({
marginTop: 0
})
}
})
});
</script>
Pastikan kembali Anda mengganti #HTML4 dengan ID widget yang akan dibuat melayang atau sticky.
terimakasih tipsnya ini sangat membantu, nanti saya akan coba
BalasHapusTerimakasih ya, saya sudah coba cara 1 dan berhasil,
BalasHapus