Membuat Sidebar Widget melayang di layar yang keren memang menarik perhatian . Cara tersebut dikenal sebagai " Sticky " widget melayang yang menempel pada layar dibagian atas saat mouse digulirkan. Dengan menggunakan widget melayang di sidebar cukup berguna bagi kita . Lalu bagaimana cara membuat widget sidebar melayang "Sticky" di Blogger.
Ingat : ini bekerja dengan cukup baik dengan segala macam widget yang ada di sidebar Anda . Cara ini bukan hanya dapat digunakan pada kotak berlangganan email . Anda dapat menggunakannya untuk promosi item Anda , galeri , posting populer , foto Instagram , yang pada dasarnya segala sesuatu yang Anda inginkan .
Langkah # 1 : Menambahkan Widget Baru :
Hal pertama yang perlu Anda lakukan adalah menambahkan widget baru pada sidebar Anda. Pergi ke Blogger.com >> Tata Letak >> Tambah Gadget >> Tambahkan HTML / JavaScript >> dan nama widget sebagai "My Gadget Sticky".
Langkah # 2 : Instalasi "Sticky" Plugin :
Setelah menambahkan widget baru di blog Anda. Sekarang pergi ke Template >> Edit HTML >> dan cari kode </body> dan tepat di atasnya copy paste kode JavaScript berikut .
<script>
/*<![CDATA[*/
// Sticky Plugin
(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>
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script type='text/javascript'>
$(document).ready(function(){
$("#mblfloater").sticky({topSpacing:0});
});
</script>Langkah # 3 : Membuat Widget "Sticky" di Blogger :
Setelah menambahkan kode JavaScript , Anda harus mencari nama widget Anda. Seperti disebutkan di atas widget tersebut kita beri nama "My Gadget Sticky".
Catatan : Untuk mengaktifkan kotak pencarian klik di mana saja di template editor dan tekan " CTRL + F " . Sekarang untuk menemukan "My Gadget Sticky" Anda akan dapat melihat kode yang mirip dengan yang berikut ini .
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<!-- 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>
</b:includable>
</b:widget>Sekarang setelah menemukan kode seperti yang disebutkan di atas, tinggal mengganti dengan coding berikut .
<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>
Ingat: ID dari widget Anda harus unik . Misalnya, jika Anda menggunakan id = 'HTML32' dalam salah satu widget Anda maka Anda tidak dapat menggunakan ID yang sama untuk yang lain.
Jika sudah selesai Simpan Template untuk menyelesaikan proses tersebut. Untuk Demonya bisa anda lihat di Sidebar Widget Sosial Media dalam blog ini.
Saya berharap semoga artikel ini bisa membantu Anda dalam menciptakan sebuah widget sidebar melayang "Sticky" di situs Blogger Anda.
0 comments:
Post a Comment