Cara Gampang Menciptakan Sticky Widget Di Sidebar Blogger
Cara menciptakan sticky widget di blogger | Membuat sticky widget di blogger itu ternyata sangat gampang sekali sobat, hanya perlu menambahkan beberapa aba-aba CSS dan aba-aba JavaScript, sticky widgetpun jadi.
O ya, btw teman tahu tidak apa itu sticky widget? Kalau diartikan secara bebas sticky widget itu yaitu widget yang melekat ketika blog di scroll. Kaprikornus si widget itu akan terus mengikuti ketika kita menscroll blog, walau hingga ke bawah. Kaprikornus keuntungannya, para pengunjung akan selalu melihat widget itu, walah sudah hingga pada final artikel. Untuk lebih jelasnya, silahkan teman lihat ke sebelah kanan blog ini, kemudian scroll hingga bawah. Maka teman akan menemukan satu widget yang ikut berjalan mengikuti scroll…. Emang ada kakinya berjalan J J J
Cara mengetahui ID Widget
Seperti yang sudah aku jelaskan tadi, untuk menciptakan sticky widget ini kita hanya perlu menambahkan aba-aba Css dan JavaScript. Namun sebelum menambahkan aba-aba CSS dan JavaScript ini, teman terlebih dahulu harus tahu ID widget yang akan di buat sticky widget ini. Caranya yaitu sebagai berikut
1. Lihat judul widget yang akan teman buat Sticky widget. Missal judul widgetnya yaitu “Ebook Free”
2. Masuk ke dasbiard blogger.com kemudian klik blog yang bersangkutan.
3. Klik sajian Template > Edit HTML
4. kemudian cari kata “ebook free” untuk mempermudah silahkan klik Ctrl+F. sesudah ketemu, kemudian lihat ID Widget nya. dari referensi gambar di bawah ID Widget "ebook Free" yaitu HTML1
Cara memasukan aba-aba CSS dan JavaScript untuk sticky widget
Nah sesudah teman mengetahui ID Widget yang akan teman jadikan Sticky (menempel), kini saatnya menambahkan aba-aba CSS dan JavaScript
1. Tambahkan kode CSS berikut ini di atas aba-aba ]]></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 aba-aba </body>
Kode JavaScript
<script type='text/j4vascript'>
$(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 teman cari tadi.
3. Klik simpan template dan lihat hasilnya.
Jika tahap-tahapnya sudah benar, maka kesannya akan menjadi menyerupai widget yang ada di sidebar blog ini. Oya, Trik menciptakan sticky widget ini aku dapatkan dari blognya kang ismet, teman niscaya tahu dong siapa itu kang ismet, kalau belum silahkan kenalan dulu, agar ilmunya nular… Semoga bermanfaat.
Sumber http://www.tutorial89.com
0 Response to "Cara Gampang Menciptakan Sticky Widget Di Sidebar Blogger"
Posting Komentar