Cara Membuat Sidebar 'Sticky' di Blogger

04:16 Muhammad Ibnu Idris 0 Comments

Tahukah Kamu dengan efek Sticky? Itu lho efek dimana memungkinkan sebuah objek misalkan sidebar melayang ketika halaman blog discroll. Jika bingung, sebagai contohnya lihat objek iklan yang berada di sidebar kanan pada halaman blog ini, lalu coba Kamu scroll halaman blog ini. Gimana, sudah tahu contohnya kan?

Dengan memanfaatkan efek seperti itu, dapat mempermudah pengelola blog dapat meletakkan sebuah widget baik iklan maupun widget penting lainnya agar tetap terlihat meskipun halaman blog digulung ke bagian paling bawah sekalipun.

Nah, yang menjadi pertanyaanya sekarang adalah bagaimana sih caranya membuat efek seperti itu. Tak usah bertele-tele, yuk simak tutorialnya di bawah ini dengan tartil (urut) ya biar nggak salah-salah.

1. Silahkan Kamu buka dashboard blogger kamu atau klik saja di sini.

2. Pilih menu Template pada right navigation di halaman itu, dan klik Edit HTML.

3. Silahkan cari kode di bawah ini dengan memanfaatkan bantuan tombol CTRL+F pada keyboard komputer Kamu.

</body>

4. Setelah ketemu, silahkan Copas saja script di bawah ini tepat sebelum kode pada nomor 3 itu.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#mblfloater").sticky({topSpacing:0});
});
</script>

5. Selanjutnya, silahkan cari script widget yang akan Kamu berikan efek sticky. Sebagai contoh, saya akan memilih sidebar HTML6. Manfaatkan bantuan CTRL+F untuk mempermudah pencarian.

<b:widget id='HTML6' locked='false' title='Gadget Sticky Saya' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>

6. Perhatikan! saya akan menyisipkan sebuah atribut pada widget HTML6. Atribut saya block warna merah. Pola yang sama, silahkan Kamu letakkan pada widget yang ingin kamu tuju.

<b:widget id='HTML6' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<div id='mblfloater'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> </div>
</b:includable>
</b:widget>

7. Setelah selesai, silahkan simpan hasil modifikasi template Kamu itu dan lihat saja hasilnya.

Semoga Kamu mengikuti tutorial ini sesuai secara terurut. Demikianlah tutorial tentang Cara Membuat Sidebar Sticky di Blogger.

Jika ada pertanyaan ataupun tanggapan, silahkan berikan komentar di bawah ini.

Sumber : mybloggerlab.com/2013/06/how-to-create-floating-sticky-sidebar-in-blogger.html