Awalnya mencoba iseng untuk memodifikasi Sticky pada sidebar, setelah cari di berbagai sumber ada hal yang menarik dari blog ampbyexample.com. Di salah satu Widget sidebar yang Sticky ternyata tidak menggunakan kode Javascript tetapi hanya menggunakan CSS, Kok bisa ya ?Akhirnya karena penasaran saya coba pasang di Template AMP HTML ternyata berhasil dan berjalan Kode CSS tersebut untuk Widget Sidebar.
Seperti yang sudah kita ketahui bersama untuk template AMP HTML tidak di sarankan penggunaan Javascript didalamnya hal tersebut akan terjadi error yang menyebabkan tidak Valid AMP HTML pada template tersebut.
Di postingan kali ini saya berbagi Cara Memasang Sticky Sidebar tanpa Javacsript Dengan CSS Pada AMP HTML yaitu dengan memanfaatkan kode CSS position: sticky; yang nantinya akan dipasang pada widget sidebar.
Bagi sobat yang penasaran dan mau mencobanya mari kita simak Cara Memasang Sticky Sidebar tanpa Javacsript Dengan CSS Pada AMP HTML berikut ini.
Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan diatas kode </head>.
Catatan :
Langkah Ke Dua
<style type='text/css'>
#sidebar-sticky {
width: 300px;
float: right;
padding: 0;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
</style>Catatan :
- Untuk lebar (widht) silahkan sesuaikan dengan lebar sidebar pada blognya, kemudian jika di blog sobat sudah menggunakan sticky header bisa disesuaikan pada top dari tinggi sticky pada headernya, ini supaya widget tidak terlihat terpotong nantinya.
- Jika pada template blog sobat yang sudah menggunakan position: sticky; yang harus diperhatikan pada div induknya tidak boleh lagi menggunakan overflow. Dan kebanyakan biasanya pada div induk untuk aside dan main selalu menggunakan class='outer-wrapper', untuk itu sobat wajib perhatikan di CSS .outer-wrapper tidak ada lagi kode overflow.
Langkah Ke Dua
Silahkan cari kode seperti dibawah ini.
Lalu silahkan salin kode ini dan letakkan tepat di dibawah kode </aside>.
Yang nantinya akan jadi seperti dibawah ini.
Setelah selesai silahkan SAVE, kemudian silahkan sobat buat gadget baru pada sidebar silahkan buat sticky di posisi sticky_sidebar. Dan SELESAI, selamat mencoba semoga bermanfaat.
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
Lalu silahkan salin kode ini dan letakkan tepat di dibawah kode </aside>.
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>Yang nantinya akan jadi seperti dibawah ini.
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>Setelah selesai silahkan SAVE, kemudian silahkan sobat buat gadget baru pada sidebar silahkan buat sticky di posisi sticky_sidebar. Dan SELESAI, selamat mencoba semoga bermanfaat.
EmoticonEmoticon