Untuk memasang sticky sidebar yang widgetnya berhenti di footer, sebetulnya dengan menggunakan CSS position:sticky akan lebih menarik, sebab tidak butuh JavaScript atau jQuery untuk membuatnya bekerja.
Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, jika ingin memasang widget sticky sidebar menggunakan position:sticky agar berhasil diterapkan.
Mari kita praktekkan.
Letakkan dulu CSS berikut ini di atas kode
Lanjut! Sebagai contoh,
Dalam susunan html yang sederhana, untuk membuat
Seperti yang ditandai pada kode di atas, widget sticky hanya punya satu induk. Yaitu
Atau,
Jika Anda ingin memasangnya di Blogger/Blogspot dan widget sticky-nya bisa ditambahkan beberapa gadget (add gadget) melalu menu Layout atau Tata Letak, maka ganti kode berikut:
Dengan kode ini:
Silahkan temukan tag div di luar dari tag induk sticky tersebut, lalu tambahkan css berikut ini di dalam tag tersebut. Contoh:
Contoh widget sticky dengan
Seperti ini juga tidak akan berhasil:
Mengapa demikian?
Karena widget sticky telah dikurung oleh 2 tag, yaitu oleh
Selanjutnya: Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah
Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, jika ingin memasang widget sticky sidebar menggunakan position:sticky agar berhasil diterapkan.
Sedikitnya ada dua syarat penting yang perlu diperhatikan, yaitu:
- Widget
position:stickytidak boleh dikurung lebih dari satu induk (tagdiv). Termasuk tag sepertimain,asidedll. - Induk
div(yang mengurung widget sticky) tidak boleh menggunakan propertyoverflow.
Mari kita praktekkan.
Letakkan dulu CSS berikut ini di atas kode
</head> atau </head><!--<head/>--><style type='text/css'>
#sticky-widget{
position:-webkit-sticky;
position:sticky;
top: 20px;
float: right;
width: 300px;
}
</style>
Catatan:
Untuk tutorial kali ini, kita menggunakan
Untuk tutorial kali ini, kita menggunakan
#sticky-widget sebagai selector widget sticky.Lanjut! Sebagai contoh,
Dalam susunan html yang sederhana, untuk membuat
position:sticky agar berhasil adalah kondisinya seperti contoh berikut.<!DOCTYPE html>
<html>
<head>
<title>Ini Website Saya</title>
</head>
<body>
<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
.................
</aside>
<div id='sticky-widget'>
<!-- Widget yang ingin di sticky disini -->
</div>
</div>
<footer id='footer-wrapper'>
.................
</footer>
</body>
</html>
Seperti yang ditandai pada kode di atas, widget sticky hanya punya satu induk. Yaitu
content-wrapper.Atau,
Jika Anda ingin memasangnya di Blogger/Blogspot dan widget sticky-nya bisa ditambahkan beberapa gadget (add gadget) melalu menu Layout atau Tata Letak, maka ganti kode berikut:
<div id='sticky-widget'>
<!-- Isi dengan yang ingin di sticky disini -->
</div>
Dengan kode ini:
<b:section class='stickyside' id='sticky-widget' name='Sticky Widget' preferred='yes'/>
Solusi lainnya
Jika Anda sudah menerapkan cara di atas dengan benar, tetapi widget sticky masih not working, silahkan lakukan cara berikut:Silahkan temukan tag div di luar dari tag induk sticky tersebut, lalu tambahkan css berikut ini di dalam tag tersebut. Contoh:
.all-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}Solusi di atas wajib diterapkan jika susunan HTML template Blogger Anda kurang lebih seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Ini Website Saya</title>
</head>
<body>
<div class='all-container'>
<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
.................
</aside>
<div id='sticky-widget'>
<!-- Widget yang ingin di sticky disini -->
</div>
</div>
<footer id='footer-wrapper'>
................
</footer>
</div>
</body>
</html>
Contoh widget sticky dengan
position:sticky yang TIDAK akan BERHASIL:<div id='content-wrapper' class='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<div id='sticky-widget'>
<b:section class='stickyside' id='sticky' preferred='yes'/>
</div>
</aside>
</div>
Seperti ini juga tidak akan berhasil:
<div id='content-wrapper'>
<main id='main-wrapper'>
.................
</main>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='stickyside' id='sticky-widget' preferred='yes'/>
</aside>
</div>
Mengapa demikian?
Karena widget sticky telah dikurung oleh 2 tag, yaitu oleh
<div id='content-wrapper' class='content-wrapper'> dan <aside> atau <aside id='sidebar-wrapper'>Selanjutnya: Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah
Posting Komentar
Komentar Blogger telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.