Cara membuat template blogger sendiri masih menjadi perhatian saya. Meskipun pada prakteknya tidak maksimal karena harus berbagi dengan kesibukan lain. Termasuk diantara kesibukan itu adalah hobi ngoprek theme blogger orang lain. Karena terkadang saya mencoba template yang ini dan itu.
Dalam masa percobaan penggunaan template orang lain tersebut tidak lupa menambahkan modifikasi. Salah satu tujuannya memang agar terlihat sedikit berbeda dengan template aslinya. Dan kali ini yang menjadi korban belajar otodidak saya adalah template EvoMagz.
Kira-kira apa yang saya lakukan dengan template karya Mas Sugeng ini? Jangan khawatir kali ini saya cuma mau menambahkan Theia Sticky Sidebar saja.
Apa itu Theia Sticky Sidebar?
Theia Sticky Sidebar adalah pustaka Javascript yang banyak digunakan pada template Wordpress premium. Script yang dibuat oleh WeCodePixels ini berfungsi untuk merekatkan sidebar situs web. Sebagaimana terlihat pada gambar dibawah yang disimbolkan dengan magnet pada bilah sisi kanan.
Perumpamaannya jika diibaratkan ada dua lempengan besi pada bagian kanan dan kiri. Dimana sebelah kiri diberi nama "Content" dan sebelah kanan disebut "Sidebar". Maka tampilan sidebar akan tetap terlihat secara permanen saat pengunjung blog menggulir ke atas dan ke bawah.
Sebagaimana dimaklumi, seringnya artikel sebuah blog yang kita baca sangat panjang. Dan ketika kita terus membaca tulisan tersebut ke bawah akan terlihat sisi sidebar yang terlihat kosong. Sehingga script ini sangat berguna ketika sidebar terlalu tinggi atau terlalu pendek dibandingkan dengan sisa konten.
Melansir dari laman github, script ini bekerja dengan hampir semua desain dan mendukung beberapa bilah sisi. Dan artikel ini saya persembahkan bagi Anda yang tertarik untuk mencobanya di Blogspot.
Cara Pasang Theia Sticky Sidebar di Blogspot
Sebelum lanjut pembahasan kali ini tentang cara pasang theia sticky sidebar. Sangat disarankan agar pembaca sekalian sudah memahami template yang digunakannya masing-masing. Karena poin pertama yang harus dipraktekan mungkin berbeda antara satu dengan yang lain.
Hal ini tergantung dengan istilah yang digunakan dalam templatenya.
Namun secara umum ada yang menamakan bagian content dengan tag; <main>, <main-wrapper>, <post-wrapper>, <blog-post> atau <content-wrapper>. Sedangkan pada bagian tata letak bilah sisi umumnya dikenal dengan tag <sidebar>, <right-sidebar>, <left-sidebar> atau <sidebar-wrapper>.
Dalam hal ini silahkan sesuaikan dengan gaya penulisan pada template yang digunakan Anda saat ini.
1. Setelah itu masuk ke dashboard Blogger > Tema > dan klik tanda panah kecil di sebelah "Sesuaikan"
2. Klik Edit HTML
3. Tambahkan <div class="theiaStickySidebar"> dan diakhiri dengan tag div penutup pada bagian content dan sidebar. Perlu diketahui, div class theiaStickySidebar ini terdapat dalam dua tempat. Satu bagian diapit oleh <div tag post-wrapper> atau <div class content> dan satu lagi diapit oleh tag <div class="sidebar">.
4. Kira-kira gambaran umumnya akan terlihat seperti berikut ini:
5. Tambahkan link JQuery dan Theia Sticky Sidebar sebelum tag body penutup (</body>).
6. Tambahkan Javascript berikut ini sebelum tag body penutup (</body>).
7. Selesai.
Penerapan Theia Sticky Sidebar pada Template EvoMagz
Pada saat mempraktekan teori di atas mungkin masih terlihat samar. Terutama pada tahapan nomor 4 di atas. Hal ini karena template kadang dibuat bukan oleh orang yang sama. Sehingga setiap orang mempunyai karakter tersendiri yang harus dipahami.
Untuk itulah, agar lebih jelas mari kita coba pada template EvoMagz karya Mas Sugeng. Ini adalah salah satu template blogspot premium yang sudah dikenal para blogger. Apalagi termasuk hasil karya cipta anak negeri asli orang Indonesia.
Langsung saja, berikut ini cara menerapkan kode Theia Sticky Sidebar pada template EvoMagz.
1. Masuk ke dasboard blogger > Tema > klik tanda panah sebelah tulisan "Sesuaikan" dan pilih Edit HTML.
2. Jika Anda belum menggunakan template EvoMagz silahkan klik tombol beli di bawah ini terlebih dahulu.
3. Cari pada bagian: <!-- post wrapper start -->
4. Tambahkan kode: <div class='theiaStickySidebar'> setelah kode <div id='post-wrapper'> dan <main id='main-wrapper'>.
5. Tambahkan tag penutup </div> sebelum tag </main>.
6. Selanjutnya cari baris kode di antara <!-- sidebar wrapper start -->, gunakan fungsi search agar lebih mudah.
7. Tambahkan kode: <div class='theiaStickySidebar'> setelah <aside id='sidebar-wrapper'>.
8. Tambahkan tag penutup </div> sebelum tag </aside>.
9. Tambahkan link JQuery dan Theia Sticky Sidebar sebelum tag body penutup (</body>) (lihat langkah nomor 5 pertama)
10. Tambahkan Javascript berikut ini sebelum tag body penutup (</body>) (lihat langkah nomor 6 pertama)
11. Selesai.
Penutup
Cara pemasangan Theia Sticky Sidebar di Blogger sangat sederhana. Karena menggunakan link yang tertuju ke server CDN (Content Delivery Network) dimana script theia sticky sidebar dan jquery tersimpan di sana. Adapun link demo blog yang bisa Anda saksikan salah satunya adalah apa yang ada di depan mata Anda saaat ini. Iya, pada saat artikel ini dibuat blog ini termasuk menggunakan theia sticky sidebar dan dengan template asli buatan orang Indonesia sebagaimana telah disinggung di atas.
Selamat mencoba.
Ralat:
Sekarang sudah menggunakan theme Blogger sendiri yang dibangun berdasarkan Bootstrap. Dan theia sticky sidebar juga sidah berhasil dipasang. Namun bukan dengan cara di atas! Melainkan dengan cara theia sticky sidebar theme bootstrap.
Tidak ada komentar:
Posting Komentar