CARA MEMBUAT STICKY WIDGET SIDEBAR TEMPLATE CONTEMPO

AvatarPosted By:
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
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

23 Komentar untuk "CARA MEMBUAT STICKY WIDGET SIDEBAR TEMPLATE CONTEMPO"

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

    BalasHapus
  2. Saya biasanya untuk widget iklan.

    BalasHapus
  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

    BalasHapus
    Balasan
    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

      Hapus
    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

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

      Hapus
  4. Coba ditest dulu ya. Abis jajal tutorial dri tetangga sbelah g workm mungkin disini work

    BalasHapus
    Balasan
    1. tidak semua jenis tema akan sama efeknya. Namun di blog ini saya telah memberikan 3 cara yang berbeda:
      1. Cara pertama ada pada artikel ini
      2. Cara kedua ada pada artikel ini: https://www.editblogtema.net/2019/05/sticky-sidebar-dengan-animasi-keren.html
      3. Cara ketiga, coba pasang kode JavaScript dibawa ini diatas kode : </body> :

      <script>
      //<![CDATA[
      HG_makeSticky("WIDGET ANDA"); // enter your widget ID here
      function HG_makeSticky(elem) {
      var HG_sticky = document.getElementById(elem);
      var scrollee = document.createElement("div");
      HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
      var width = HG_sticky.offsetWidth;
      var iniClass = HG_sticky.className + ' HG_sticky';
      window.addEventListener('scroll', HG_sticking, false);
      function HG_sticking() {
      var rect = scrollee.getBoundingClientRect();
      if (rect.top < 0) {
      HG_sticky.className = iniClass + ' HG_sticking';
      HG_sticky.style.width = width + "px";
      } else {
      HG_sticky.className = iniClass;
      }
      }
      }
      //]]>
      </script>
      <style>
      .HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
      </style>

      Hasilnya bisa dilihat di

      https://waktu66.blogspot.com/

      Hapus
    2. Cara ketiga hanya muncul di tampilan PC aja yah? Bisa diset ke tampilan mobile ga?... Misalnya, di mobile gak fixed sidebar sedangkan di PC fixed sidebar

      Hapus
    3. Bisa karena dibawahnya telah ditambahkan style @mediaquerry..

      Hapus
  5. Bang saya pake template textrim blogger kok susah bgt ya sidebar dibuat sticky :(

    BalasHapus
  6. Balasan
    1. Jelas tidak akan berhasil jika menggunakan widget lama, karena textrim sudah menggunakan layout templgat blog versi ke-3, untuk textrim kode berikut dibawah sangat manjur, cobalah dengan memasang PopularPosts terlebih dahulu, letakan diatas kode: </body>
      <script>
      //<![CDATA[
      HG_makeSticky("PopularPosts1"); // enter your widget ID here
      function HG_makeSticky(elem) {
      var HG_sticky = document.getElementById(elem);
      var scrollee = document.createElement("div");
      HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
      var width = HG_sticky.offsetWidth;
      var iniClass = HG_sticky.className + ' HG_sticky';
      window.addEventListener('scroll', HG_sticking, false);
      function HG_sticking() {
      var rect = scrollee.getBoundingClientRect();
      if (rect.top < 0) {
      HG_sticky.className = iniClass + ' HG_sticking';
      HG_sticky.style.width = width + "px";
      } else {
      HG_sticky.className = iniClass;
      }
      }
      }
      //]]>
      </script>
      <style>
      .HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
      </style>

      Hapus
    2. silahkan lihat hasilnya di:
      https://newthemer.blogspot.com/2019/06/loremipsum6.html
      Popularpost jadi sticky dengan baik

      Hapus
    3. Mantapp bang.. thankss.. sya coba dulu...

      Hapus
    4. Thanks work bang.. ☺️

      Cuma tampilannya menumpuk dengan footer yaykalau sidebar popular posts berjumlah 10 postingan..

      Hapus
    5. Agar textrim tetap cepat loading disarankan jumlah popularposts hanya 5 , Ya kode apapun akan mtampak menumpuk ke footer jika dipasang terlalu banyak. Sekalipun kita menambahkan aba aba CSS, akan terlihat tidak estetis karena terlalu "mendorong" widget ke atas header atau ke bawah footer.

      Lakukan percobaan pengaturan sampai tampak rapi. Selamat ngeblog!

      Hapus
  7. Sekarang, lumayan rapi ... Cuman white space antara sidebar dan main post bertubrukan

    BalasHapus
  8. kalo buat sidebar kanan di template contempo bgmna ya seperti contempo hybrid

    BalasHapus
    Balasan
    1. @Nayla K.A
      Kami sebenarnya telah lama ingin memposting cara merombak layout contempo full. karena untuk merubah struktur template kita harus merombaknya dari merubah ID dan Class hingga memodifikasi pengaturan CSS dan menyisipkan pengaturan menggunakan Javascript.

      Mudah mudahan dalam waktu dekat akan kami posting, mungkin Anissa lebih piawai dalam hal ini. Postingannya pasti panjang banget.

      Hapus

Silahkan berkomentar sesuai dengan topik kita ya...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel