Cara membuat sticky widget di blogger | Membuat
sticky widget di blogger itu ternyata sangat mudah sekali sobat, hanya perlu
menambahkan beberapa kode CSS dan kode JavaScript, sticky widgetpun jadi.
O ya, btw sobat tahu tidak apa itu sticky
widget? Kalau diartikan secara bebas sticky widget itu adalah widget
yang menempel ketika blog di scroll. Jadi si widget itu akan terus
mengikuti ketika kita menscroll blog, walau sampai ke bawah. Jadi keuntungannya, para pengunjung akan selalu melihat widget itu, walah sudah sampai pada akhir artikel. Untuk lebih
jelasnya, silahkan sobat lihat ke sebelah kanan blog ini, kemudian scroll
sampai bawah. Maka sobat akan menemukan satu widget yang ikut berjalan
mengikuti scroll…. Emang ada kakinya berjalan J J J
Cara mengetahui ID Widget
Seperti yang sudah saya jelaskan tadi, untuk membuat
sticky widget ini kita hanya perlu menambahkan kode Css dan JavaScript. Namun
sebelum menambahkan kode CSS dan JavaScript ini, sobat terlebih dahulu harus
tahu ID widget yang akan di buat sticky widget ini. Caranya adalah
sebagai berikut
1.
Lihat judul widget yang akan sobat buat Sticky widget. Missal judul
widgetnya adalah “Ebook Free”
2.
Masuk ke dasbiard blogger.com kemudian klik blog yang bersangkutan.
3.
Klik menu Template > Edit HTML
4.
kemudian cari kata “ebook free” untuk mempermudah silahkan klik Ctrl+F.
setelah ketemu, lalu lihat ID Widget nya. dari contoh gambar di bawah ID Widget "ebook Free" adalah HTML1
Cara memasukan kode CSS dan JavaScript untuk sticky widget
Nah setelah sobat mengetahui ID Widget yang
akan sobat jadikan Sticky (menempel), sekarang saatnya menambahkan kode CSS dan JavaScript
1.
Tambahkan kode CSS berikut ini di atas kode ]]></b:skin> .
Kode Css
.sticky {
position:fixed;
top:10px;/*
jarak dari atas, silahkan disesuaikan*/
z-index: 100;
}
2.
Tambahkan kode JavaScript berikut
ini di atas kode </body>
Kode JavaScript
<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>
Ganti #HTML1 dengan ID widget yang sudah tadi sobat cari tadi.
3. Klik simpan template dan lihat hasilnya.
Jika tahap-tahapnya sudah benar, maka hasilnya akan
menjadi seperti widget yang ada di sidebar blog ini. Oya, Trik membuat sticky
widget ini saya dapatkan dari blognya kang ismet, sobat pasti tahu dong siapa
itu kang ismet, jika belum silahkan kenalan dulu, biar ilmunya nular… Semoga bermanfaat.