Penulis KANG CYMOT | Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile, Apa kabar sahabat blogger Kang Cymot? semoga sobat - sobat baik-baik saja tentunya. Pada postingan kali ini saya akan membagikan tutorial membuat sticky widget pada sidebar khusunya dan sticky widget ini sudah fix pada tampilan mobil, contohnya bisa dilihat pada blog saya.
Terus apa sih kegunaaannya membikin sticky widget? Salah satu tujuan dibuatnya sticky widget merupakan untuk membekali info dengan cara terus-menerus memperlihatkan pengunjung yang mengunjungi blog anda. Biasanya pembuatan sticky widget di gunakan untuk artikel terbaru atau popular post bahkan ada juga yang digunakan untuk mempromosikan iklan semacam google adsense. Dengan sticky tersebut pastinya diinginkan bisa menambah jumlah klik iklan banyak pada blog anda. Baiklah tidak usah berlama - lama lagi, yuk simak tutorialnya berikut dibawah ini.
Cara menemukan ID atau kode widget sidebar blog sobat, sobat bisa pergi ke Tata letak pada Dashboard blog sobat terus Klik Edit pada widget Sidebar yang akan dibuat sticky, selajutnya lihat pada link nya disitu sobat bisa menemukan ID widgetnya seperti contoh gambar dibawah.
Sobat bisa menggantinya seperti contoh #HTML1 pada #sticky-sidebar.
Demikian saja postingan mengenai Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile, semoga dengan artikel ini bisa menjadi informasi yang bermanfaat buat sobat. Bila ada saran atau ada pertanyaan, sobat bisa berkomentar dibawah. Selamat mencoba!!!
Terus apa sih kegunaaannya membikin sticky widget? Salah satu tujuan dibuatnya sticky widget merupakan untuk membekali info dengan cara terus-menerus memperlihatkan pengunjung yang mengunjungi blog anda. Biasanya pembuatan sticky widget di gunakan untuk artikel terbaru atau popular post bahkan ada juga yang digunakan untuk mempromosikan iklan semacam google adsense. Dengan sticky tersebut pastinya diinginkan bisa menambah jumlah klik iklan banyak pada blog anda. Baiklah tidak usah berlama - lama lagi, yuk simak tutorialnya berikut dibawah ini.
Berikut Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile
- Pertama Silahkan Masuk ke dashboard blogger sobat>Tema>Edit HTML.
- Simpan kode script dibawah ini tepat diatas atau sebelum kode </body>.
<!-- JAVASCRIPT STICKY WIDGET -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#sticky-sidebar').offset().top - stickyHeight - 35; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script> - Perhatikan kode yang saya beri warna hijau, sobat ganti dengan ID WIDGET yang akan dibuat sticky.
Cara menemukan ID atau kode widget sidebar blog sobat, sobat bisa pergi ke Tata letak pada Dashboard blog sobat terus Klik Edit pada widget Sidebar yang akan dibuat sticky, selajutnya lihat pada link nya disitu sobat bisa menemukan ID widgetnya seperti contoh gambar dibawah.
Baca Juga:
- Selanjutnya untuk membuat Widget sticky tersebut tidak melebar tampilannya saat di scroll, Sobat tambahkan kode CSS dibawah ini dan simpan diatas kode ]]></b:skin>.
/* CSS RESPONSIVE STICKY WIDGET */
#sticky-sidebar{background:#fff;width:100%;max-width:300px}
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
} Demikian saja postingan mengenai Cara buat Sticky widget responsif sidebar blog FIX Tampilan mobile, semoga dengan artikel ini bisa menjadi informasi yang bermanfaat buat sobat. Bila ada saran atau ada pertanyaan, sobat bisa berkomentar dibawah. Selamat mencoba!!!
EmoticonEmoticon