Theia Sticky Sidebar adalah pustaka JavaScript yang dibuat oleh WeCodePixels. Fungsinya agar tampilan sidebar tidak habis ketika kita scroll artikel yang panjang. Sehingga tampilan sidebar selalu terlihat sepanjang apa pun artikel yang kita baca.
Pengalaman seperti ini tentu baik karena terlihat profesional. Untuk itu saya pasang pada theme sebelumnya dengan sukses. Namun seiring waktu mulai berubah haluan ketika mengenal Bootstrap. Sejurus kemudian akhirnya berhasil membuat theme Blogger berdasarkan Bootstrap.
Setelah itu saya kembali ingin menerapkan theia sticky sidebar. Namun kali ini pada theme blogger yang dibangun dengan Bootstrap. Hasilnya, cara pasang theia sticky sidebar sebelumnya tidak bisa diterapkan. Mungkin caranya lain jika menggunakan theme blogger yang dibangun dengan Bootstrap.
Ada yang sudah menemukan cara pasang theia sticky sidebar ini? Jika belum, mari simak cara pasangnya pada theme Blogger yang dibangun dengan Bootstrap kali ini.
Cara Pasang Theia Sticky Sidebar di Theme Blogger Bootstrap
Cara pasang theia sticky sidebar ini sebetulnya diadaptasi dari github. Lihat! pada tutorial tersebut masih menggunakan Bootstrap 4. Dan itu tidak masalah karena menggunakan versi 5 pun berhasil. Sebagaimana terlihat pada theme ini yang juga memasang theia sticky sidebar.
Adapun pemasangan theia sticky sidebar pada theme blogger. Mungkin ini yang menjadi kendala sebagian pemula. Karena tutorial di atas diterangkan langkah per langkah secara umum saja. Dan ini pentingnya berbagi pengalaman bagi seorang blogger.
Langsung saja, berikut ini cara pasang theia sticky sidebar theme Blogger Bootstrap.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Pastikan theme sudah terpasang baris kode berikut di bawah tag <head> dan sebelum </head>
4. Baris kode JavaScript dari Bootstrap juga sudah terpasang sebelum tag penutup </body>.
5. Ini poin paling penting yang harus diperhatikan. Bandingkan dengan cara pasang theia sticky sidebar sebelumnya. Jika sebelumnya harus menempatkan class "theiaStickySidebar" di dua tempat. Maka kali ini tidak perlu. Makanya saya tandai dengan komentar agar tidak menjadi aktif menjadi <!--<div class='theiaStickySidebar'>--> dan <!--</div>--> di dua tempat. Silahkan hapus saja jika sebelumnya pernah mengikuti tutorial cara pasang theiaStickySidebar pada theme non Bootstrap.
6. Letakan script berikut sebelum </body>. Perhatikan! untuk ".col-lg-8" dan ".col-lg-4" silahkan sesuaikan dengan theme Blogger Anda yang dibangun dengan Bootstrap. Jika sama silahkan copy and dan paste seluruhnya. Jika beda, ganti saja dua elemen tersebut yang mewakili bagian "main/article/main-wrapper" dengan "sidebar" theme Anda.
7. Tempatkan CSS berikut setelah <b:skin><![CDATA[/* dan sebelum ]]></b:skin>.
8. Simpan theme.
Kesimpulan
Theia Sticky Sidebar merupakan pustaka JavaScript yang merekatkan sidebar atau kolom vertikal. Dengan script ini membuat sidebar tetap terlihat saat menggulir ke atas dan ke bawah. Hal ini sangat berguna ketika sidebar terlalu tinggi atau terlalu pendek dibandingkan lainnya.
Melansir dari github, script ini bekerja dengan hampir semua desain dan mendukung banyak sidebar. Dan saya membuktikannya pada theme blogger yang dibangun dengan Bootstrap ataupun tidak.
Sehingga bisa dikatakan script ini bisa diterapkan pada CMS apapun. Jadi tidak hanya hanya berjalan pada WordPress. Meskipun disebutkan di sana bahwa fitur ini tersedia dalam bentuk plugin WordPress premium. Teman-teman berhasil memasang theia sticky sidebar?
Silahkan komentar di bawah, tapi jika belum ada ruang berarti fungsi komentar belum dibuat neh. Maklum theme baru yang masih perlu pembenahan di sana-sini.
Semoga bermanfaat..
Tidak ada komentar:
Posting Komentar