3 cara sederhana menambahkan Sticky widget pada sidebar pada template blog

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:

Versi layout 2: Tema sederhana, awsome, PT. keren sekali, perjalanan dst
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:

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

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.com