Tutorial Membuat Widget SIdebar Tetap Muncul Diam Saat di Scroll Ke Bawah

Sobat! Mungkin pernah melihat blog yang ketika discroll ke bawah muncul iklan di sidebar yang tidak hilang. Iklan tersebut tetap berada di atas sejajar dengan menu. Namun jika discroll ke atas iklan tersebut turun ke bawah. Inilah yang dimaksud dengan iklan widget melayang. Keuntungan dari iklan widget melayang adalah ketika iklan sidebar kosong, karena postingan yang panjang ke bawah iklan ini tetap muncul tidak hilang. Sehingga pengunjung akan tetap melihat iklan di samping. Dengan demikian peluang pengunjung untuk mengklik iklan lebih besar.

Widget melayang atau tetap diam saat discrool bisa digunakan untuk adsense, kalau logikanya menggangu kenyamanan pengunjung, menurut saya iklan scroll ini sama sekali tidak menghalangi pengunjung untuk mengakses laman lainnya. Posisi Iklan tidak menghilang berada di samping, kemudian dia tetap mengikuti scroll ketika widget lainnya masih ada.

Nah! mungkin bagi sobat yang memiliki blog ada keinginan untuk menggunakan widget tersebut yaitu menempatkan iklan yang diam muncul ditempat saat discroll ke bawah. Dengan harapan dapat menambah tingkat klik iklan. Maka sobat bisa ikuti tutorial di bawah ini :
1. Masuk ke akun blogger
2. Pilih Tema > edit html
3. Cari kode </head> atau dengan menekan ctrl+f enter
4. Masukan kode di bawah ini tepat di atas </head>

<script type='text/javascript'>
/*<![CDATA[*/
(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>

5. Cari kode </body>  dan paste kode di bawah ini di atas kode </body>

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

6. Cari kode ]]></b:skin> kemudian paste kode di bawah ini di atasnya

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

7. Save Template

8. Pasang Static Sidebar Widget

• Layout > Pilih Widget yang akan dijasikan tatis atau melayang
• Klik "Edit"
• Copy ID Widget nya di address bar.

6. Kembali klik Template > Edit HTML
7. Press CTRL + F untuk menemukan Widget ID yang akan distatiskan.

Misalnya:

<b:widget id='HTML1' locked='false' title='Widget Title' 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>

8. Copas kode berikut ini di bawah kode <b:includable id=’main’>

<div id="mdstickybar">

9. Masukkan kode </div> setelah kode <data:content/>

Jadinya seperti ini:

<b:widget id='HTML1' locked='false' title='Widget Title' 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>

Save!

Silahkan lihat hasil iklannya, seperti tampilan iklan di blog ini. 

Sumber lengkap silahkan kunjungi  Membuat WIdget Melayang di Contoh Blog

Subscribe to receive free email updates: