Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll
Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll -Sticky Sidebar, Static Sidebar, Floating Sidedar, FixedSidebar.

Melengkapi tips Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, kali ini CB share kode dan cara membuat widget sidebar tetap muncul, statis, saat halaman digeser ke bawah.

Istilahnya banyak: Static, Fixed, Sticky, dan Floating Sidebar Widget. Artinya sama: widget tetap muncul alias melayang saat halaman discroll ke bawah.

Elemen ini penting untuk menampilkan widget ungulan di sidebar blog. Juga untuk kerapian tampilan jika sidebar sedikit atau banyak widget, sehingga tetap sejajar dengan Main Wrapper atau kolom utama blog (postingan).

Cara Membuat Widget Sidebar Blogger Tetap Muncul 

Langsung saja kita ke tutorial pemasangan kodenya sebagaimana dishare laman Making Different berikut ini.

1. Tema >  Edit HTML
2. Simpan kode berikut ini di atas kode </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>

3. Copas kode berikut ini di atas kode </body> 

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

4. Simpan kode berikut ini di atas kode ]]></b:skin> 

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

Save Template!

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


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!

Cara #2 Pasang Sticky Sidebar 

Cara lain memasang Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll.

Kode CSS
Simpan di atas kode ]]></b:skin>

#sticky-sidebar{width:100%;max-width:300px}
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Kode JS
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID Widget yang akan distatiskan
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Save!

Cara #3 Pasang Sticky Sidebar (Recommended)

1. Klik Layout dan hapus SEMUA widget yang sudah dipasang. Jika ada kode, amankan dulu kodenya untuk nanti dipasangkan lagi.
2. Klik Tema > Edit HTML
3. Hapus dan ganti kode  <aside id='sidebar-wrapper'> .. </aside> atau  <div id='sidebar-wrapper'> ... </div> dengan kode di bawah ini:

<aside id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar_top' mobile='yes' preferred='yes'/>
        <b:section class='sidebar' id='sidebar_bottom' mobile='yes' preferred='yes'/>
</aside>

Kode di atas akan menjadikan elemen sidebar menjadi dua bagian, yakni sidebar atas (sidebar_top) dan sidebar bawah (sidebat_bottom). Nah, yang bawah inilah yang akan menjadi sticky widget!

4. Copas kode berikut ini di atas kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
// Theia Sticky Sidebar v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar
// Tutorial: https://goo.gl/szhFRE
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
$(document).ready(function(){$("#sidebar-wrapper").theiaStickySidebar({additionalMarginTop:10,additionalMarginBottom:10})});
//]]>
</script>

5. Pastikan di template Anda sudah terpasang kode jQuery library. Contohnya yang seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang/copas kode tersebut di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

6. Agar Sticky Sidebar tidak berfungsi saat blog dibuka di HP, tambahkan kode berikut ini di atas kode ]]></b:skin>

@media screen and (max-width:768px){
#sidebar-wrapper{overflow:visible}
}

7. Save! Simpan perubahan template.

Demikian cara membuat Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll ke bawah.

Susah? Mending gak usah pasang aja. Ojo neko-neko lah. Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll hanya akan memperlambat loading blog Anda. Apalagi kodenya jQuery.

Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll | Labels: Desain Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

6 komentar on Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

  1. saya lihat ada beberapa blog yang pasang widget ini untuk adsense, apakah ini aman untuk akun adsense gan?

    ReplyDelete
    Replies
    1. Tidak boleh dipasang untuk AdSense, bisa kena banned !

      Delete
    2. Iklan ini disebut sebagai "iklan melekat/sticky ads" dan pemasangannya terbatas bagi penayang yang telah disetujui. Pihak Google Adsense akan mengambil tindakan jika menemukan penggunaan iklan semacam ini yang tidak disetujui.

      Delete
  2. Oh jadi gk boleh toh masang iklan ky gini, kalau iklan adsense yg muncul pas loading mau pindah artikel di blog itu boleh gk ?
    Kn menutupi semua layar, tp masih bisa ditutup sih..

    ReplyDelete
    Replies
    1. Intinya, adsense tidak boleh mengganggu konten dan/atau kenyamamanan pembaca. Begitu kata Google di panduannya.

      Delete
  3. Udah nyoba yg langkah terakhir, tapi ga ngefek Om,.
    Tp setelah baca kalimat penutup artikel ini jd di batali pasang nya :D
    Takut visitor kabur karena blog jd berat :D :D

    ReplyDelete

Contact Form

Name

Email *

Message *

Back To Top