Cara Menciptakan Responsive Sticky Widget Di Sidebar Blog
Widget ialah sesuatu hal yang banyak dipakai para blogger di templatenya, entah itu untuk tujuan memasang iklan, memasang widget artikel terbaru, widget komentar, ataupun jenis widget lainnya. Tujuannya ialah semoga para pengguna merasa nyaman dan mendapat info yang lebih banyak dari blog kita.
Biasanya ketika kita memasang widget kemudian melaksanakan scroll ke bawah, widget tersebut akan tetap dalam posisinya. Nah kini bagaimana yang harus dilakukan semoga widget tersebut tetap di posisinya (fixed)? Berikut akan kita bahas.
Untuk menciptakan widget tersebut tetap di posisinya, kita hanya perlu membuat sticky widget. Sebenarnya sudah aneka macam tutorial yang tersebar untuk memasang widget ini, namun pada pemasangannya widget ini belum responsif. Ketika ukuran layar diperkecil, widget sticky ini akan menutupi halaman pembaca dan hal itu bertolak belakang dengan fungsi widget itu sendiri menyerupai yang saya sampaikan di pendahuluan.
Nah maka dari itu kita akan mengubahnya menjadi sticky widget yang responsive.
Berikut ialah salah satu script yang tersebar di internet, namun pada penggunaannya masih belum responsive.
Memang, ketika di tampilan dekstop, widget ini berjalan sempurna. Namun kesalahan terjadi ketika ukuran layar browser diperkecil, widget akan menutupi halaman blog. Seperti gambar di bawah ini:
Mengapa dapat begitu? Dimana kesalahannya?
Hasil peninjauan saya dari arahan tersebut, widget akan menjadi sticky (menambahkan css posision:fixed dan top:20px pada widget) hanya ketika letak widget kurang dari letak scroll pada halaman tersebut.
Nah ini yang menjadi permasalahan. Makara ketika lebar layar browser diperkecil, halaman sticky tersebut akan muncul dan menghalangi halamannya. Seharusnya tidak begitu.
Nah untuk menjadikannya responsive, kita harus menambahkan satu kondisi lagi. Sehingga kondisinya menjadi:
Mengapa saya menentukan 759px? Karena biasanya ketika lebar browser 759px, template blog akan otomatis menghilangkan/memindahkan bab sidebarnya ke bawah.
Maka dari itu kita tambahkan satu variable lagi yang memuat nilai dari lebar browser
Lalu tambahkan ke kondisinya, sehingga menjadi:
Selesai, dan ini ialah arahan sticky widget yang sudah responsive:
Nah jikalau ketika scroll, widget menjadi melebar dan menutupi sebagian halaman, maka tambahkan arahan menyerupai ini dibagian cssnya:
Fungsinya untuk membatasi lebar ketika widget tersebut dalam keadaan sticky.
Kang penggunaannya gimana?
Ganti id widgetnya (#HTML202) dengan id widget yang ingin dijadikan sticky widget.
Ganti #footer dengan kawasan berhentinya widget tersebut.
top: 20 ialah jarak berhentinya widget dengan kawasan berhentinya widget.
max-width:260px ialah nilai lebar widgetnya.
Letakkan arahan javascript di atas </body> untuk css diletakkan di <style>
Selesai deh, dengan ini kita telah menciptakan sticky widget yang responsive. Kode tersebut dipasang juga di blog saya untuk widget recent post (artikel terbaru).
Nah mungkin sekian dari saya dari cara menciptakan sticky widget responsive di blog, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.
Silakan untuk bertanya di kolom berkomentar.
Cara Membuat Responsive Sticky Widget di Blog
Biasanya ketika kita memasang widget kemudian melaksanakan scroll ke bawah, widget tersebut akan tetap dalam posisinya. Nah kini bagaimana yang harus dilakukan semoga widget tersebut tetap di posisinya (fixed)? Berikut akan kita bahas.
Untuk menciptakan widget tersebut tetap di posisinya, kita hanya perlu membuat sticky widget. Sebenarnya sudah aneka macam tutorial yang tersebar untuk memasang widget ini, namun pada pemasangannya widget ini belum responsif. Ketika ukuran layar diperkecil, widget sticky ini akan menutupi halaman pembaca dan hal itu bertolak belakang dengan fungsi widget itu sendiri menyerupai yang saya sampaikan di pendahuluan.
Nah maka dari itu kita akan mengubahnya menjadi sticky widget yang responsive.
Berikut ialah salah satu script yang tersebar di internet, namun pada penggunaannya masih belum responsive.
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#HTML202').length) { // Ganti "#sticky-sidebar" dengan ID tertentu var el = $('#HTML202'); var stickyTop = $('#HTML202').offset().top; var stickyHeight = $('#HTML202').height(); $(window).scroll(function() { var limit = $('#footer').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { 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>Memang, ketika di tampilan dekstop, widget ini berjalan sempurna. Namun kesalahan terjadi ketika ukuran layar browser diperkecil, widget akan menutupi halaman blog. Seperti gambar di bawah ini:
Hasil peninjauan saya dari arahan tersebut, widget akan menjadi sticky (menambahkan css posision:fixed dan top:20px pada widget) hanya ketika letak widget kurang dari letak scroll pada halaman tersebut.
if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); }Nah ini yang menjadi permasalahan. Makara ketika lebar layar browser diperkecil, halaman sticky tersebut akan muncul dan menghalangi halamannya. Seharusnya tidak begitu.
Nah untuk menjadikannya responsive, kita harus menambahkan satu kondisi lagi. Sehingga kondisinya menjadi:
Ketika letak widget kurang dari letak scroll pada halaman dan lebar layar lebih dari 759px, maka widget menjadi sticky.
Mengapa saya menentukan 759px? Karena biasanya ketika lebar browser 759px, template blog akan otomatis menghilangkan/memindahkan bab sidebarnya ke bawah.
Maka dari itu kita tambahkan satu variable lagi yang memuat nilai dari lebar browser
var lebar = $(window).width();Lalu tambahkan ke kondisinya, sehingga menjadi:
if ((stickyTop < windowTop)&&(lebar > 759)) { el.css({ position: 'fixed', top: 20 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); }Selesai, dan ini ialah arahan sticky widget yang sudah responsive:
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#HTML202').length) { // Ganti "#sticky-sidebar" dengan ID tertentu var el = $('#HTML202'); var stickyTop = $('#HTML202').offset().top; var stickyHeight = $('#HTML202').height(); $(window).scroll(function() { var limit = $('#footer').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer" 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>Nah jikalau ketika scroll, widget menjadi melebar dan menutupi sebagian halaman, maka tambahkan arahan menyerupai ini dibagian cssnya:
#HTML202{width:100%;max-width:260px;margin:0;}Fungsinya untuk membatasi lebar ketika widget tersebut dalam keadaan sticky.
Kang penggunaannya gimana?
Ganti id widgetnya (#HTML202) dengan id widget yang ingin dijadikan sticky widget.
Ganti #footer dengan kawasan berhentinya widget tersebut.
top: 20 ialah jarak berhentinya widget dengan kawasan berhentinya widget.
max-width:260px ialah nilai lebar widgetnya.
Letakkan arahan javascript di atas </body> untuk css diletakkan di <style>
Selesai deh, dengan ini kita telah menciptakan sticky widget yang responsive. Kode tersebut dipasang juga di blog saya untuk widget recent post (artikel terbaru).
Nah mungkin sekian dari saya dari cara menciptakan sticky widget responsive di blog, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.
Silakan untuk bertanya di kolom berkomentar.
0 Response to "Cara Menciptakan Responsive Sticky Widget Di Sidebar Blog"
Posting Komentar