CARA MEMBUAT STICKY WIDGET SIDEBAR TEMPLATE CONTEMPO

CARA MEMBUAT STICKY WIDGET SIDEBAR TEMPLATE CONTEMPO

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.
pada gambar terlihat gagdet atau widget followers yang jadi lengket pada sidebar pada saat konten blog di scroll
Animasi sidebar sticky
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:
  1. Pilih Tema
  2. Pilih dan klik Edit HTML
  3. Pada halaman HTML yang telah terbuka cari kode: </body>
  4. Dan letakan kode dibawah ini diatasnya:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> <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"
memunculkan menu dropdown berisikan daftar widget yang ada didalam template blogger kita

Setelah semua dilakukan SAVE templat. Cara diatas mirip penerapannya pada tema tema klasik non-contempo kecuali pada tambahan:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 </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

Beri Komentar ya...

8 Comments

  1. Terkadang hal macam kaya gini kita gak ngerti ya kang.. makasih sharenya mau coba dipraktekan ah

    ReplyDelete
  2. Saya biasanya untuk widget iklan.

    ReplyDelete
  3. Mas tau cara membuat sidebar untuk blog tidak?, untuk blog saya be-pe.blogspot .com. Wah sidebarnya gak ada, saya kebingungan mau nambahinnya. Jadi ya terpaksa kalo mau nambahin widget, kalo ga keatas ya kebawah wkwkw :v

    ReplyDelete
    Replies
    1. Tema yang mas pakai buatan si Igniel. Tapi saya kurang tau basisnya simple apa awsome ya soalnya dipermak habis sama dia. Klo simple tinggal merobah media query saja untuk menampilkan kembali sidebar yang "disembunyikan".

      Tapi klo menurut saya templatenya ringan, cepat dan responsive. Memang itu harga sebuah kecepatan: Kesederhanaan

      Klo yang Pi-sang juga keren karena menu pencariannya mirip Vio-Mag buatan Mas Sugeng. Klo yang ini saya bisa bantu bikinin sidebarnya jadi sticky dan menu pada navigasi jadi punya dropdown

      Delete
    2. Sebenarnya bisa sih mas, tinggal memperlebar main wrapper nya, tinggal disisipin sidebar wrappernya gitu, tapi saya ubah di css nya tetep sama tidak berubah sedikitpunm. Main wrappernya sudah berubah, nah yang saya bingung untuk pembagian lebar antara main wrapper dan sidebar wrapper nnya itu bagaimana.

      Saya tanya ke pembuat templatenya katanya gak bisa, karena khusus.. Masa ya gak bisa, padahal tinggal ngerubah CSS nya aja loh

      Delete
    3. aaaa...klo Si Igniel bilang gitu dia gak rela hasil karyanya di permak ha ha ha...kabur aja deh

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik