Minggu, Desember 21, 2014

Cara mudah membuat sticky widget di sidebar blogger

Asalamu'alaikum Wr. Wb. Bagaimana kabarnya sobat hari ini? Jumpa lagi dengan kami masih di TUTORIAL89, tempatnya berbagi tutorial-tutorial menarik. Dikesempatan kali ini kami akan membahas "Cara mudah membuat sticky widget di sidebar blogger".

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”
Cara mudah membuat sticky widget di sidebar blogger
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 mudah membuat sticky widget di sidebar blogger

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.