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>Ganti tulisan berwarna merah dengan widget yang sobat inginkan misalnya: "PopularPosts1" maka cara menulisnya adalah: PopularPosts1. Save template.
//<![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>
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.comMungkin masih ada cara keempat dan kelima yang lebih sederhana, silahkan berkreasi sendiri.
Love your photo:)
BalasHapusThis blog is about blogger templates. It is safe, ptremium, fascinate, and free..thank you for visit us!
Hapusoke mas mantap saya juga lagi belajar utak atik ini
BalasHapusGood entry:)
BalasHapusSo good to know, thanks for sharing ☺
BalasHapus