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..
Di tema blog saya ada terpasang Theia Sticky Sidebar. Apakah berpengaruh terkait Performa dan SEO blog jika saya hapus script nya?
BalasHapusMenurut saya pribadi yang masih pemula, secara langsung kemungkinan tidak berpengaruh ke arah sana. Karena tujuan script theia sticky sidebar lebih ke tampilan iklan agar lebih sering terlihat pengunjung. Ini juga kalo jenis iklannya itu PPC atau baru menghasilkan uang ketika diklik ya tetep saja tidak menghasilkan meskipun nongol terus di depan layar tp tidak ada yang klik. Beda kasus klo jenis iklannya yg dibayar per tayangan.
BalasHapusAdapun SEO dan performa sepertinya terkait dengan jQuery yang diakses dari server CDN. Dan Bootstrap versi 5 saja sudah meninggalkan jQuery. Konon katanya, jQuery itu bisa bikin loading lama. Dan dengan Bootstrap 5 kita bisa melakukan apa pun yang bisa dilakukan jQuery.
Oleh karena itu, jika Anda memutuskan untuk menghapus script Theia Sticky Sidebar. Jangan lupa hapus juga script yang mengarah ke server CDN JQuery yang letaknya diantara tag head pembuka dan head penutup. Karena link ini saya pikir bisa berpengaruh langsung pada kecepatan loading situs yang pastinya mempengaruhi performa.
Catatan:
Saya pernah menggunakan tool dari Ezoic yang menyatakan bahwa Bootstrap juga salah satu yang memperlambat situs, selain kehadiran jQuery, Google Fonts dan lain-lain. Saran saya, biar performa lebih bagus jangan menggunakan Bootstrap juga untuk membuat theme blogger. (Blog ini sih udah terlanjur pake bootstrap.....lg bikin yang pure html, css dan vanilla JS jga gak kelar-kelar karena gak bisa hehe).