Pagi All
Masukan kode widget / iklan sobat pada tulisan "YOUR WIDGET CODE HERE" Save dan lihat hasilnya.
Beberapa waktu yang lalu saya memuat artikel tutorial tentang Floating Sidebar Widget , supaya sidebar bisa ikut kebawah ketika di scroll seperti pada homepage blog saya dan artikel itu di dedikasikan untuk pertanyaan salah satu komentar sahabat , yang menanyakan bagaimana caranya memasang widget subscribe floating , setelah aku jelaskan tutorialnya , kata dia pemasangannya cukup rumit , tersirat di fikiranku yang dia maksud mungkin ingin pemasangan yang lebih mudah.
Masuk pada edit template
Cari kode </head>
Masukan kode dibawah ini sebelum kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
Save
Sekarang sobat masuk pada Tata Letak > Add Gadget > HTML / Javascript
<script type="text/javascript">
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper'
},
$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.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- 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.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className
});
});
},
update: scroller
};
// 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(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);
//]]>
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
YOUR WIDGET CODE HERE</div></div></div>
Masukan kode widget / iklan sobat pada tulisan "YOUR WIDGET CODE HERE" Save dan lihat hasilnya.
kureeeeeeennn pokonya, top markotop, mantap surantappppppppppppp
BalasHapushahaha meni sakituna si akang .. haturnuhun kang ah
Hapusmangga atuh kopina di leueut hehe
wahh.. kemana-mana emang kalo cuma nambahin widget, kodenya tambah panjang kali lebar.
BalasHapusmaksudnya bukan kode yang aku tekankan tapi cara pemasangan yang lebih gampang miz ...
Hapuslagian gak bikin berat ke blognya ..
mau pasang tapi di blog mamang ndak ada itu ' head" jadi bingung hadooooh
BalasHapusmasa mang dikamanakeun atuh mang eta mastakana hehe
Hapusciamik pisan nih akang...tutorialnya
BalasHapuspaling jago deh...hebat...hehe
kapan2 saya juga boleh request ya kang Ruly... :)
ah bisa aja neh mas bud .. masih dalam tahap belajar mas
Hapusemmhh boleh .. but kalau gagal jgn nyalahin yah hehe
hi...juga :)
BalasHapusapa coba hehe
BalasHapusTah ieumah rada babari yeuh sigana heuheu
BalasHapuslain babari deui kang super babari hehe
Hapus