Cara Membuat Sticky Widget Sidebar di Blog sobat

Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara membuat Widget Sidebar selalu menempel atau selalu meng... thumbnail 1 summary

2/09/2016

Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara membuat Widget Sidebar selalu menempel atau selalu mengikuti kemana scroll naik atau turun, kali ini Skrip Hijau ingin memberikan tutorial tersebut.

Kelebihan Sticky Widget

Masuk ke Dashboard Blogger

Klik Template » Edit HTML

Cari kode ]]></b:skin> ( untuk mempercepat pencarian tekan Ctrl+F )

Masukkan kode dibawah ini diatas/sebelum kode ]]></b:skin>

Lalu cari kode </head> dan masukan kode dibawah ini diatas/sebelum kode </head>

Selanjutnya cari </body>

Masukkan kode dibawah ini diatas/sebelum kode </body>

Simpan Template

Lalu sobat kembali lagi ke Template » Edit HTML

Lalu cari ID Widget sobat yang tadi ingin diberi Sticky Widget

Contoh ID Widget yang ada pada Template

Lalu Sobat hanya tinggal menambah beberapa kode pada kode Widget diatas tadi, berikut kodenya...

Masukan kode tadi, di Widget seperti ini:

Terakhir, Simpan Template.

Kelebihannya tentu membuat pengunjung menjadi lebih mudah untuk melihat Sidebar Widget yang sobat-sobat gunakan pada blog sobat, dan Sticky Widget ini tidak memberatkan atau tidak memberi efek berat pada blog sobat, jadi jangan sungkan untuk menggunakan Sticky Widget ini.

Cara Membuat Sticky Widget Pada Blog

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/><script type='text/javascript'>/*<![CDATA[*/// Sticky Plugin// =============// Author: Lintas Weblog// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)// Created: 2/14/2011// Date: 9/12/2011// Website: http://labs.anthonygarand.com/sticky// Description: Makes an element on the page stick on the screen as you scroll// For Blogger by : http://lintasweblog.blogspot.com/(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>

Kode yang saya beri warna berbeda, itu adalah jQuery, jika sudah ada jQuery tersebut diblog sobat, lebih baik hapus satu, karena jika jQuery tersebut ada dua di Blog sobat, Sticky Widget ini tidak akan bisa/berhasil.

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

Setelah itu kita harus mencari ID Widget yang akan kita pasang Sticky Widgetnya, Untuk mencari ID Widget Cukup Sobat masuk pada Tata Letak » Lalu cari widget yang akan sobat pasang Sticky » lalu Klik Edit pada Widget tersebut, nah ID Widget sobat akan tertera pada Url Widget, contoh Url Widget:

http://www.blogger.com/rearrange?blogID=1787216510986734973&action=editWidget&sectionId=sidebar-bawah&widgetType=null&widgetId=HTML2

Yang saya beri warna Hijau tadi, itu adalah ID Widget

<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Diatas adalah kode Widget asli pada Template sobat, mungkin biasanya berbeda sedikit, tapi cara membuat Sticky Widget ini akan selalu berhasil

<div id='mdstickybar'></div>

<b:widget id='HTML2' locked='false' title='Contact' type='HTML'><b:includable id='main'> <div id='mdstickybar'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div></div><b:include name='quickedit'/></b:includable></b:widget>

Itulah Cara Membuat Sticky Widget Sidebar Pada Blog. Jika ada kekurangan atau terjadi masalah pada Template Sobat bisa berkomentar dibawah ini.

sumber

09 Februari 2016

Cara Membuat Sticky Widget Sidebar di Blog sobat