Skip to main content

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

Mungkin Anda Suka:

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
  4. Coba ditest dulu ya. Abis jajal tutorial dri tetangga sbelah g workm mungkin disini work

    ReplyDelete
    Replies
    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/

      Delete
    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

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

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

    ReplyDelete
  6. Replies
    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>

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

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

      Delete
    4. Thanks work bang.. ☺️

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

      Delete
    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!

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

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

ANDA PANASARAN, APAKAH IMUWAN PERCAYA KEPADA TUHAN?

Pertanyaan yang paling menggelitik para penganut agama perihal apakah ilmuwan percaya agama dan bagaimana cara mereka memandang penciptaan alam semesta diantaranya adalah:
Apakah Einstein percaya doaApakah Ilmuwan percaya akan keberadaan TuhanBagaimana dia memandang penciptaan Alam Semesta?Beda, beda banget dengan kita. Sebagian besar faktanya tercermin dari hasil penelitian ilmiah yang mereka presentasikan di depan umum, sebagian lagi dari statemen dan jawaban jawaban yang telah di publikasikan pada saat ceramah  sesi ilmiah yang pernah di berikannya.
Kita sedang membicarakan empat orang Ilmuwan dan penemu hebat, ilmuwan paling beken sepanjang masa: Albert Einstein, Stephen Hawking, Thomas Edison dan Charles Darwin. Terlepas bagaimana para pemeluk Agama yang taat memandang mereka, tidak dapat di sangkal lagi, ide ide, teori teori dan penemuan mereka telah meraut bulat lonjongnya dunia yang sedang kita huni di Dunia sekarang ini. Sebagian besar hasil sumbangsih mereka bahkan ikut andi…

CARA MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

2 CARA KEREN MEMASANG NAVBAR MENU PADA TEMPLATE NOTABLE

Saya suka Notable, bergaya desain rockpool, template ini dinamis, kencang, aman dan stylish. Tetapi untuk membuatnya tampak beda (stylish) kalian harus berusaha merubah, mengedit dan menambah pada bagian CSS, HTML atau bahkan hingga menambahkan Javascript. Salah satu cara merombak tampilannya adalah dengan menambahkan navbar custom ke dalam template Notable. Dan jika kalian ingin template tersebut menjadi beda, tampak premium dan lebih bagus performa nya, maka kalian dapat mengikuti langkah langkah berikut:
1. Menambahkan navbar dengan drop down Silahkan pasang template notable ke blogger untuk percobaan kalian, lalu masuk ke bagian pengaturan dasbor blogger. Saya anggap kalian telah menggunakan tampilan dasbor terbaru blogger: Pilih temaKlik menu (tiga titik bersusun)Ketika muncul menu dropdown pilih: Edit HTMLPerhatikan gambar: Pada halaman editor HTML blogger cari kode </head> dan letakan saja kode CSS berikut tepat diatasnya: <style>
body {margin:0;font-family:Arial}
.topnav …

PANDUAN LENGKAP SEDERHANA MENGEDIT TEMPLATE EMPORIO

4 varianTemplate terbaru milik blogspot blogger memiliki banyak sekali kelebihan: Kemudahan mengedit dan memkustomisasi template, kaya dengan style dan warna. Cobalah! Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lai…

PANDUAN MEROMBAK TEMPLATE BLOGGER SOHO

SOHO adalah template terbaru, template ini dapat di rombak dengan mudah karena memiliki pengaturan CSS yang melimpah.
Dalam kesempatan ini saya akan memberikan 6 trik merobah tampilan template Soho, yakni:
Menambahkan photo profile penulis di atas setiap postinganMerobah tampilan ikon menu pencarian menjadi kaca pembesar pada semua ukuran layar. Secara default ikon kaca pembesar hanya tampil pada layar ponsel, sedangkan pada ukuran layar PC laptop apalagi desktop tampilannya akan menjadi kata: 'Search'Mengatur margin konten, lebar konten, dan lebar sidebarMerobah tombol 'Subscribe' atau 'Langganan' menjadi berbentuk ikon Amplop Surat.Cara menghilangkan background gambar kucing pada bagian header template.Cara menghilangkan Judul Recent PostsTiga hal diatas cukup signifikan dapat merobah tampilan template SOHO kita menjadi lebih berwibawa dan berkarakter! Mari kita mulai. 1. MENAMBAHKAN PHOTO PROFILE DI BAGIAN ATAS SETIAP HALAMAN POSTINGANIni cocok untuk halaman b…
Copyright © EDITBLOGTEMA. All rights reserved.