Cara membuat sticky widget dengan mudah. Sicky widget adalah dimana widget pada suatu blog bisa melayang atau menempel pada layar. Jadi meskipun di scroll kebawah ataupun keatas akan tetap pada posisinya. Akan kelihatan lebih keren jika blog anda dipasang sticky widget. Blog akan kelihatan lebih professional. Ini memang benar, facebook saja memakai sticky widget, dan saya juga memakainya. hehe..
 |
| Cara Membuat Sticky Widget dengan Mudah |
"Apakah cuma widget saja yang bisa dipasang sticky?"
Sebenarnya bukan hanya widget saja sob, anda juga bisa memasangnya pada menu navigasi anda atau yang lainya. Jadi pada intinya, apapun yang dipasang kode script sticky ini akan tetap pada posisinya dilayar meskipun dscroll kebawah maupun keatas. Jika menu navigasi yang dipasang sticky, ini akan lebih memudahkan pengunjung untuk langsung memilih kategori pada artikel yang dipasang di menu. Jadi tidak perlu scroll ke atas terlebih dahulu, karena sudah menempel di layar ketika discroll ke bawah,
"Lalu, bagaimana cara memasangnya mas? Sulit apa tidak?"
Tenang sob, cara memasang scticky widget sangatlah mudah bila sudah tahu scriptnya, hehe.. Tapi tenang, anda tidak perlu membuat scriptnya lagi, disini saya sudah menyediakan script untuk langsung dipasang pada blog anda. Untuk cara pemasangannya, anda bisa ikuti langkah-langkahnya dibawah ini.
Cara Membuat Sticky Widget
1. Silahkan anda masuk pada dashboard blog anda sob.
2. Kemdian pilih template lalu edit HTML.
3. Silahkan cari kode </head> dengan menekan ctrl+f, lalu copy pastekan kode dibawah ini dan letakkan tepat diatas atau sebelum kode </head>. (Lihat gambar dibawah kotak script)
<!—sticky widget halus-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Widget
(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 widget halus -->
4. Kemudian carilah kode </body> dengan cara seperti poin 3. Lalu copy pastekan kode dibawah ini tepat diatas kode </body>. (Lihat gambar dibawah kotak script)
<script type='text/javascript'>
$(document).ready(function(){
$("#popularpost1").sticky({topSpacing:50});
});
</script>
Baca juga Berbagai macam web tools untuk edit blog
Keterangan
- Silahkan ganti tulisan #popularpost yang berwarna biru dengan nama widget yang ingin dijadikan sticky.
- Silahkan ganti topSpacing yang bernilai 50 dan berwarna merah itu dengan sesuka anda. Topspacing adalah jarak widget dari atas dengan satuan pixel.
5. Jika sudah semua, silahkan klik save template. Jika belum yakin, anda bisa klik pertinjauan terlebih dahulu dan lihat hasilnya dalam kolom pertinjauan. Jika sudah berfungsi benar dan tidak eror, silahkan klik save template.
Demikian artikel saya tentang tutorial cara membuat sticky eidget dengan mudah. Jika masih bingung dan ada yang ditanyakan, silahkan tulis komentar dibawah. Semoga artikel ini bermanfaat bagi anda sob. Terimakasih.
Comments