3 cara sederhana menambahkan Sticky sidebar pada template blog

Sticky sidebar
Banyak cara untuk membuat halaman web menjadi lebih impressif. Diantaranya dengan cara menambahkan widget sticky sidebar. Namun...

Tidak semua template sama struktur elemennya jadi setiap widget yang dibuat oleh pihak ketiga tentu akan berbeda efeknya terhadap jenis atau varian template yang satu dengan yang lain.

Apalagi template sekarang umumnya terbagi dua versi:
  1. Versi layout 2: Tema sederhana, awsome, PT. keren sekali, perjalanan dst
  2. Versi layout 3 (terbaru - 4 varian): Contempo, Soho, Notable dan Emporio.
Selama ini alasan blogger menambahkan sidebar sticky adalah karena tema tema versi layou 2 yang lebih lama itu. Secara default (bawaan) Template template tersebut memang memiliki tampilan sidebar. 

Sedangkan 4 varian template blogger terbaru tidak memiliki sidebar model template template lama tersebut, kecuali jika opsi sidebarnya di tampilkan dengan jalan merombak total template template tersebut tersebut. Contohnya template contempo buatan editblogtema (Lihat dan klik GALLERY TEMPLATE pada navigasi blog ini).

Baiklah kita langsung masuk ke caranya:

1. Cara pertama:
Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
&lt;b:if cond=&#039;data:blog.isMobileRequest
== &amp;quot;false&amp;quot;&#039;&gt; &lt;
script type=&#039;text/javascript&#039;&gt; //&lt;!
[CDATA[ // Sticky widget $(function(){if($(&quot;#HTML1&quot;)
.length){var o=$(&quot;#HTML1&quot;),
t=$(&quot;#HTML1&quot;)
.offset().top,i=$(&quot;#HTML1&quot;)
.height();$(window).scroll(function(){var s=$(&quot;#comments&quot;).offset()
.top-i-20,f=$(window).scrollTop();if(f&gt;t?
o.css({position:&quot;fixed&quot;,top:15}):o
.css(&quot;position&quot;,&quot;static&quot;),
f&gt;s)
{var n=s-f;o.css({top:n})}})}});
//]]&gt; &lt;/script&gt; &lt;/b:if&gt;
Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1"  maka cara menulisnya adalah: #PopularPosts1. Save template.

2. Cara kedua:
Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
<script>$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });</script>
Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1" maka cara menulisnya adalah: #PopularPosts1. Save template.

3. Cara ketiga:
Masuk kepengaturan (dasbor) blog>Pilih tema>Pilih edit HTML, lalu cari kode
</body> dan letakan kode JavaScript berikut tepat diatasnya:
<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>
Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1"  maka cara menulisnya adalah: PopularPosts1. Save template.
Cara ini bisa diterapkan pada template template yang dibuat berdasarkan layout ke-3 misalnya template textrim buatan Igniel.

Mungkin masih ada cara keempat dan kelima yang lebih sederhana, silahkan berkreasi sendiri.

www.editblogtema.net


Comments

  1. Replies
    1. This blog is about blogger templates. It is safe, ptremium, fascinate, and free..thank you for visit us!

      Delete
  2. oke mas mantap saya juga lagi belajar utak atik ini

    ReplyDelete
  3. good post 😊 would you like to follow each other? if the answer is yes, please follow me on my blog & i'll follow you back. https://camdandusler.blogspot.com

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

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

pilih pola label berikut:

Show more