Sore All
Langkah selanjutnya sobat cari nama ID widget subscribe yang telah dipasang tadi contohnya widget yang saya punya seperti ini
NB : Kode HTML32 sobat ganti dengan ID widget subscribe sobat dan nama "My Sticky Gadget" sobat ganti sesuka sobat.
Save dan lihat hasilnya
Note : Widget Floating "Sticky" Sidebar ini jangan sobat pasang pada widget adsense , karena ini salah satu alasan akun adsense sobat akan di banned.
Floating artinya mengambang dan Sticky artinya nempel/menempel sedangkan Sidebar tentu sobat sudah tahu artinya . Pada kesempatan ini saya akan share tutorial membuat Floating " Sticky " Sidebar , berarti widget sidebar akan terus mengikuti walaupun di scroll kebawah dan tutorial ini sebenarnya request dari sahabat.
Untuk demo sticky widget sidebar sobat bisa lihat widget Subscribe pada homepage blog ini dan pemasangan trik ini cukup mudah
Sobat pasang dulu widget subscribe pada blog sobat dan letakan pada bagian sidebar paling atas. Setelah itu sobat masuk pada Edit Template lalu cari kode </body> dan tempatkan kode dibawah ini tepat diatas kode </body>
<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>
Langkah selanjutnya sobat cari nama ID widget subscribe yang telah dipasang tadi contohnya widget yang saya punya seperti ini
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<div id='mblfloater'>
<!-- only display title if it's non-empty -->
<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>
dan sobat ganti semua kodenya dengan kode dibawah ini
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<div id='mblfloater'>
<!-- only display title if it's non-empty -->
<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>
NB : Kode HTML32 sobat ganti dengan ID widget subscribe sobat dan nama "My Sticky Gadget" sobat ganti sesuka sobat.
Save dan lihat hasilnya
Note : Widget Floating "Sticky" Sidebar ini jangan sobat pasang pada widget adsense , karena ini salah satu alasan akun adsense sobat akan di banned.
saya msh ndak paham nih... nyimak dulu sambil nunggu komentar yg lain
BalasHapusini mbak.. yang di sidebar blog ini.. kan subcrisbenya bisa jalan ngikutin scroll kebawah
Hapusmakasih miz telah menjelaskan hehe
HapusNaon ieuteh bro,asa lieur keneh,karek hudang euy heuheu
BalasHapusartinya apa kang.. -__-
Hapusapaan ini brow , masih pusing , maklum baru bangun oy ( translate )
Hapusini bagus sekaliiiiiiiii....
BalasHapussaya cari -cari dan tanya ama orang pada pelit semua
eh taunya di blog agan ada rupanya makasih ya gan... ini bagus buat iklan :D
..
terimakasih banyak... :)
#tiap hari mantau blog agan keren-keren tutornya :army
ko pelit ya hehe
Hapustapi jangn buat iklan adsense bisa bisa di banned sob ..
terimakasih kembali sobat
wah sangat mantap dan berguna sekali sobat
BalasHapusterima kasih sudah berbagi
terimakasih sanjungannya mas jdi malu hixhix
Hapuspertanyaanku ternyata terbalas lewat postingan lagi haha..
BalasHapusbanyak jga kodenya,, kirain cuma nambahin kode di widget .
udah dua postingan idenya dari pertanyaan miz tia terus hehe
Hapustapi gak bakalan berat ko blognya .. lagian juga gampang masangnya miz
wah keren nih layak dicoba, thank mas udah berbagi
BalasHapusmaap nembe bisa blogging hehheeee
silahkan kang .. apalagi masangnya sambil ngabajigur matapzzzz kang ..
Hapussumpah kang saya mah lagi ngabakar ikan hiu hehe
mantap sekali artikel nya sob,,,saya nyari2 yang kayak gini emank
BalasHapuskunjungi juga blog saya
disini sob!!