Cara Membuat Sticky Widget Sidebar di Blog

Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara menciptakan Widget Sidebar selalu melekat atau selalu mengikuti kemana scroll naik atau turun, kali ini Berilah ingin memperlihatkan tutorial tersebut

Perhatian: Dulu blog Berlian yaitu LintasWeblog, jadi maklumi kalau setiap postingan selalu ada kata LintasWeblog

Kelebihan Sticky Widget

Kelebihannya tentu menciptakan pengunjung menjadi lebih gampang untuk melihat Sidebar Widget yang sobat-sobat gunakan pada blog sobat, dan Sticky Widget ini tidak memberatkan atau tidak memberi pengaruh berat pada blog sobat, jadi jangan sungkan untuk memakai Sticky Widget ini.

Cara Membuat Sticky Widget Pada Blog

• Masuk ke Dashboard Blogger
• Klik Template » Edit HTML
• Cari arahan ]]></b:skin> ( untuk mempercepat pencarian tekan Ctrl+F )
• Masukkan arahan dibawah ini diatas/sebelum arahan ]]></b:skin> 

<!--sticky-->
#mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px;
color:#474747;}
<!--sticky-->

• Lalu cari arahan </head> dan masukan arahan dibawah ini diatas/sebelum arahan </head>

<!--sticky-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Lintas Weblog
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// For Blogger by : http://lintasweblog.blogspot.com/
(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>
<!--sticky-->

Kode yang aku beri warna berbeda, itu yaitu jQuery, kalau sudah ada jQuery tersebut diblog sobat, lebih baik hapus satu, alasannya kalau jQuery tersebut ada dua di Blog sobat, Sticky Widget ini tidak akan bisa/berhasil.

• Selanjutnya cari </body>
• Masukkan arahan dibawah ini diatas/sebelum arahan </body>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickybar&quot;).sticky({topSpacing:0});
});
</script>

• Simpan Template

Setelah itu kita harus mencari ID Widget yang akan kita pasang Sticky Widgetnya, Untuk mencari ID Widget Cukup Sobat masuk pada Tata Letak » Lalu cari widget yang akan teman pasang Sticky » kemudian Klik Edit pada Widget tersebut, nah ID Widget teman akan tertera pada Url Widget, pola Url Widget:

http://www.blogger.com/rearrange?blogID=1787216510986734973&action=editWidget&sectionId=sidebar-bawah&widgetType=null&widgetId=HTML2

Yang aku beri warna Hijau tadi, itu yaitu ID Widget

• Lalu teman kembali lagi ke Template » Edit HTML
• Lalu cari ID Widget teman yang tadi ingin diberi Sticky Widget
• Contoh ID Widget yang ada pada Template

 <b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
 <b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content'>
 <data:content/>
 </div>
 <b:include name='quickedit'/>
</b:includable>
 </b:widget>

Diatas yaitu arahan Widget orisinil pada Template sobat, mungkin biasanya berbeda sedikit, tapi cara menciptakan Sticky Widget ini akan selalu berhasil :P

• Lalu Sobat hanya tinggal menambah beberapa arahan pada arahan Widget diatas tadi, berikut kodenya...

<div id='mdstickybar'>
</div>

• Masukan arahan tadi, di Widget menyerupai ini:

<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>
<div id='mdstickybar'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

• Terakhir, Simpan Template.

Itulah Cara Membuat Sticky Widget Sidebar Pada Blog. Jika ada kekurangan atau terjadi dilema pada Template Sobat dapat berkomentar dibawah ini.

Sebenarnya Siraja Blogger "Kang Ismet" sudah pernah memperlihatkan tutorial Membuat Sticky Widget pada postingannya, tapi banyak para Blogger yang tidak berhasil/gagal pada tutorialnya tersebut, dengan alasan yang berbeda-beda, dan tutorial ini aku pastikan akan berhasil pada Blog sobat, So Funny and Always Blogging :D

Tweet

Subscribe to receive free email updates: