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 supaya para pengguna merasa nyaman dan mendapat warta 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 supaya widget tersebut tetap di posisinya (fixed)? Berikut akan kita bahas.
Untuk membuat widget tersebut tetap di posisinya, kita spesialuntuk perlu menciptakan 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 penlampauan.
Nah maka dari itu kita akan mengubahnya menjadi sticky widget yang responsive.
Berikut ialah salah satu script yang tersebar di internet, namun pada penerapannya masih belum responsive.
Memang, dikala 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) spesialuntuk 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 menambahkan satu variable lagi yang memuat nilai dari lebar browser
Lalu menambahkan ke kondisinya, sehingga menjadi:
Selesai, dan ini ialah arahan sticky widget yang sudah responsive:
Nah kalau ketika scroll, widget menjadi melebar dan menutupi sebagian halaman, maka menambahkan arahan menyerupai ini dibagian cssnya:
Fungsinya untuk membatasi lebar ketika widget tersebut dalam keadaan sticky.
Kang penerapannya 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 sudah membuat sticky widget yang responsive. Kode tersebut dipasang juga di blog saya untuk widget recent post (artikel terbaru).
Nah mungkin sekian dari saya dari cara membuat sticky widget responsive di blog, terimakasih sudah mengunjungi blog aku, dan semoga bermanfaa.
Silakan untuk bertanya di kolom berkomentar.
Teknik 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 supaya widget tersebut tetap di posisinya (fixed)? Berikut akan kita bahas.
Untuk membuat widget tersebut tetap di posisinya, kita spesialuntuk perlu menciptakan 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 penlampauan.
Nah maka dari itu kita akan mengubahnya menjadi sticky widget yang responsive.
Berikut ialah salah satu script yang tersebar di internet, namun pada penerapannya 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, dikala 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) spesialuntuk 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 menambahkan satu variable lagi yang memuat nilai dari lebar browser
var lebar = $(window).width();Lalu menambahkan 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 kalau ketika scroll, widget menjadi melebar dan menutupi sebagian halaman, maka menambahkan arahan menyerupai ini dibagian cssnya:
#HTML202{width:100%;max-width:260px;margin:0;}Fungsinya untuk membatasi lebar ketika widget tersebut dalam keadaan sticky.
Kang penerapannya 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 sudah membuat sticky widget yang responsive. Kode tersebut dipasang juga di blog saya untuk widget recent post (artikel terbaru).
Nah mungkin sekian dari saya dari cara membuat sticky widget responsive di blog, terimakasih sudah mengunjungi blog aku, dan semoga bermanfaa.
Silakan untuk bertanya di kolom berkomentar.
Post a Comment for "Cara Menciptakan Responsive Sticky Widget Di Sidebar Blog"