Sticky sidebar yang dimaksud adalah widget yang berada disamping kanan konten utama pada tampilan laptop sebuah website atau blog. Pada template template premium utama, sticky sidebar selalu disertakan. (Sebenarnya saya kurang menyukainya, kecuali apabila gagdet seperti itu mampu membooster kecepatan). Kita akan menerapkannya pada template contempo yang sudah di modifikasi menjadi ContempoHybrid. Percayalah jika sobat mendapatkan tema contempo yang telah memiliki sidebar kanan sobat dapat menerapkannya juga.
Template contempo itu dasarnya sama dengan template lain, namun beda dalam banyak hal: Pada template aslinya sidebar tersembunyi oleh separator, CSS yang melimpah. Kesamaannya tetap bisa ditambahkan dengan kode kode HTML pihak ketiga. Misalnya trik untuk membuat sticky bar pada templaet contempo hybrid adalah sebagai berikut:
Masuk ke pengaturan blog:
Sobat Ganti semua kode ("#HTML1") dengan kode widget sidebar yang ingin sobat buat sticky misalnya editblogtema memilih membuat follower atau pengikut menjadi "lengket" di sidebar pada saat halaman konten di scroll keatas dan kebawah, maka kode milik edit blog tema tersebut adalah ("#Followers1") Cara mencari widgetnya adalah dengan melihat diatas halaman edit HTML ada pilihan menu "lompat ke widget" tinggal sentuh dan tekan itu pakai jari (kalau menggunakan laptop layar sentuh) atau gunakan mouse.
Perhatikan "lompat ke widget" pada toolbar bagian atas halaman edit HTML di pengaturan blogger sobat yang apabila ditekan akan memunculkan menu dropdown berisikan list atau daftar yang ada didalam tema blogger sobat saya memilih "follower1"
Setelah semua dilakukan SAVE templat. Cara diatas mirip penerapannya pada tema tema klasik non-contempo kecuali pada tambahan:
<b:if cond='data:blog.isMobileRequest == "false"'>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</b:if>
Perintah tersebut untuk menghindari sticky mempengaruhi gagdet atau widget tersebut pada tampilan mobile (hape).
Sebagai catatan terakhir, Sticky sidebar atau sticky widget ini hanya berlaku pada saat orang membuka dan membaca konten, bukan pada tampilan homepagenya
STICKY UNTUK HOMEPAGE PADA CONTEMPO
Trik diatas hanya buat sticky sidebar pada saat artikel atau konten blog dibuka. Namun sidebar tidak sticky alias lengket pada saat dibuka melaui homepage blogger. Untuk merobahnya cukup merobah:
s=$("#comments")
Menjadi:
s=$("#footer")
Pada editblogtema.net saya menggunakannya sebagai berikut, sobat boleh mengkopi pastekannya pada tema contempo sobat yang telah di modifikasi memiliki sidebar di kanannya pada tampilan laptop:
<script type='text/javascript'>
//<![CDATA[
// Sticky widget
$(function(){if($("#PopularPosts1").length){var o=$("#PopularPosts1"),t=$("#PopularPosts1").offset().top,i=$("#PopularPosts1").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-1,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:110}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
Cobalah buka homepage editblogtema.net untuk membuktikannya.
www.editblogtema.net
 |
| Animasi sidebar sticky |
Masuk ke pengaturan blog:
- Pilih Tema
- Pilih dan klik Edit HTML
- Pada halaman HTML yang telah terbuka cari kode: </body>
- Dan letakan kode dibawah ini diatasnya:
<b:if cond='data:blog.isMobileRequest == "false"'> <script type='text/javascript'> //<![CDATA[ // Sticky widget $(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#comments").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:15}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}}); //]]> </script> </b:if>
Sobat Ganti semua kode ("#HTML1") dengan kode widget sidebar yang ingin sobat buat sticky misalnya editblogtema memilih membuat follower atau pengikut menjadi "lengket" di sidebar pada saat halaman konten di scroll keatas dan kebawah, maka kode milik edit blog tema tersebut adalah ("#Followers1") Cara mencari widgetnya adalah dengan melihat diatas halaman edit HTML ada pilihan menu "lompat ke widget" tinggal sentuh dan tekan itu pakai jari (kalau menggunakan laptop layar sentuh) atau gunakan mouse.
Perhatikan "lompat ke widget" pada toolbar bagian atas halaman edit HTML di pengaturan blogger sobat yang apabila ditekan akan memunculkan menu dropdown berisikan list atau daftar yang ada didalam tema blogger sobat saya memilih "follower1"
Setelah semua dilakukan SAVE templat. Cara diatas mirip penerapannya pada tema tema klasik non-contempo kecuali pada tambahan:
<b:if cond='data:blog.isMobileRequest == "false"'>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</b:if>
Perintah tersebut untuk menghindari sticky mempengaruhi gagdet atau widget tersebut pada tampilan mobile (hape).
Sebagai catatan terakhir, Sticky sidebar atau sticky widget ini hanya berlaku pada saat orang membuka dan membaca konten, bukan pada tampilan homepagenya
STICKY UNTUK HOMEPAGE PADA CONTEMPO
Trik diatas hanya buat sticky sidebar pada saat artikel atau konten blog dibuka. Namun sidebar tidak sticky alias lengket pada saat dibuka melaui homepage blogger. Untuk merobahnya cukup merobah:
s=$("#comments")
Menjadi:
s=$("#footer")
Pada editblogtema.net saya menggunakannya sebagai berikut, sobat boleh mengkopi pastekannya pada tema contempo sobat yang telah di modifikasi memiliki sidebar di kanannya pada tampilan laptop:
<script type='text/javascript'>
//<![CDATA[
// Sticky widget
$(function(){if($("#PopularPosts1").length){var o=$("#PopularPosts1"),t=$("#PopularPosts1").offset().top,i=$("#PopularPosts1").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-1,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:110}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
Cobalah buka homepage editblogtema.net untuk membuktikannya.
www.editblogtema.net