Cara Membuat Sticky Widget di Sidebar Blog Responsive

Cara Membuat Sticky Widget di Sidebar Blog Responsive - Pada artikel sebelumnya saya sudah membagikan tentang Cara Memasang Iklan AdSense Melayang di Bawah Versi Mobile (HP), sekarang saya akan membagikan lagi tutorial dengan fungsi yang hampir sama yaitu dengan membuat widget tertentu menjadi sticky atau melayang dan mengikuti halaman saat anda men scroll keatas dan kebawah. Script yang akan saaya bagikan ini bisa dipasang pada semua konten (widget) di Sidebar maupun dipasang pada salah satu widget tertentu. Widget sticky atau melayang ini dapat berfungsi pada browser PC dan Mobile. Bagi anda yang ingin menerapkan Cara Membuat Sticky Widget di Sidebar Blog Responsive ini silahkan anda mengikuti langkah-langkah dibawah.

Cara Membuat Sticky Widget Responsive di Sidebar Blog.

• Pertama silahkan buka template editor blogger (Edit HTML) kemudian copy paste kode dibawah ini tepat sebelum kode </body>.
• Silahkan ganti kode #sticky-sidebar dan #footer-wrapper (jika perlu) sesuai dengan id widget yang akan anda jadikan sticky / melayang.

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

• Sesuaikan lebar pada konten atau widget yang ingin anda buat sticky dengan CSS, disini saya memberikan 300px untuk lebar sticky widget, contohnya seperti ini. 

#sticky-sidebar{width:100%;max-width:300px}

Atau

#HTML1{width:100%;max-width:300px}

Tentukan lebarnya sesuai dengan lebar sidebar template anda, jangan lupa untuk mengganti lebar pada media query tertentu, misalnya seperti ini.

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Maka hasilnya akan seperti gambar ini, widget sidebar akan tetap (melayang) jika anda menscroll ke atas dan kebawah.

Sticky Widget Popular yang di terapkan pada blog ini.

Untuk Sticky widget ini sebenarnya bisa juga di terapkan pada iklan AdSense namun sepertinya membuat iklan adsense dengan melayang beresiko banned, Demikian artikel Cara Membuat Sticky Widget di Sidebar Blog Responsive, semoga bermanfaat.

Artikel Terkait

Cara Membuat Sticky Widget di Sidebar Blog Responsive

4/ 5

Oleh Unknown

Unknown 6:04 PM