Cara Pasang Sticky Sidebar Blogger - Widget Tetap Muncul Saat Scroll

Baca Juga

Cara Pasang Sticky Sidebar di Blogger - Widget Sidebar Tetap Muncul Saat Scroll ke Bawah. Ada dua cara.

Widget sticky adalah widget yang tetap akan muncul meskipun laman blog di scroll ke bagian bawah oleh pengunjung. Widget sticky biasanya digunakan blogger untuk menonjolkan konten atau informasi tertentu, seperti widget langganan artikel, widget artikel populer, hingga iklan.

Template Blogger terbaru biasanya sudah memasang fixed Sidebar ini. Umumnya menggunakan kode TheiaSticky.

Cara #1 Pasang Sticky Sidebar di Blogger

Pertama-tama, karena menggunakan kode javascript, pastikan ada link ke kode jQuery di template blog Anda. Seperti ini:

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

Jika tidak ada, copas kode tersebut di atas kode </head> atau </body>

Langkah kedua dan berikutnya Cara Pasang Sticky Sidebar di Blogger adalah sebagai berikut.

1. Hapus kode HTML sidebar seperti ini:

<div id="sidebar-wrapper"> ...</div>

2. Ganti dengan kode berikut 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 baru di atas menjadikan sidebar di Layout ada dua, yakni Sidebar Top (Atas) dan Sidebar Bottom (Bawah). Nah, yang bagian bawah inilah akan menjadi Sticky Sidebar.

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

<script type='text/javascript'>
//<![CDATA[ // Theia Sticky Sidebar v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar //
!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>

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

@media screen and (max-width:768px){ 

#sidebar-wrapper{overflow:visible} 

}

Kode di atas agar StickySidebar tidak aktif di device 768px ke bawah

Cara #2 Membuat Widget Sticky di Sidebar

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

<script>
$(document).ready(function() {
var div = $('#WIDGET_ID_NAME');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : ");
});
});
</script>

2. Ganti kode berwarna merah dengan ID widget yang ingin Anda buat menjadi sticky (floating).
3. Save! Simpan perubahan.

Cara #3 Membuat Widget Sticky di Sidebar (Recommended)

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

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><script type="text/javascript">
$(function() {
    var ks_widget_top = $('#Label1').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop();
         
        if (ks_current_top > ks_widget_top) {
          $('#Label1').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#Label1').css({ 'position': 'relative' });
        } 
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });
});</script></b:if>

2. Ganti kode berwarna merah dengan ID widget yang ingin Anda buat menjadi sticky (floating).
3. Copas kode berikut ini di atas kode ]]></b:skin> 

#Label1{width:100%;max-width:300px}

Note: kode ini agar ukuran widget tidak melebar saat sticky.

4. Save! Simpan perubahan.

Cara #4 Pasang Sticky Sidebar Blogger

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

 &lt;b:if cond=&#039;data:blog.isMobileRequest
== &amp;quot;false&amp;quot;&#039;&gt; &lt;
script type=&#039;text/javascript&#039;&gt; //&lt;!
[CDATA[ // Sticky widget $(function(){if($(&quot;#HTML1&quot;)
.length){var o=$(&quot;#HTML1&quot;),
t=$(&quot;#HTML1&quot;)
.offset().top,i=$(&quot;#HTML1&quot;)
.height();$(window).scroll(function(){var s=$(&quot;#comments&quot;).offset()
.top-i-20,f=$(window).scrollTop();if(f&gt;t?
o.css({position:&quot;fixed&quot;,top:15}):o
.css(&quot;position&quot;,&quot;static&quot;),
f&gt;s)
{var n=s-f;o.css({top:n})}})}});
//]]&gt; &lt;/script&gt; &lt;/b:if&gt;

2. Ganti tulisan berwarna merah dengan ID widget yang akan dijadikan sticky
3. Save template!

Cara #4 Pasang Sticky Sidebar Blogger

1. Simpan kode berikut ini di atas kode </body>

 <script>
$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });
</script>

2. Ganti tulisan berwarna merah dengan ID Widget yang akan dijadikan statis.
3. Save template!

Cara #4 Pasang Sticky Sidebar Blogger

1. Simpan di atas kode </body> 

 <script>
//<![CDATA[
HG_makeSticky("PopularPosts1"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

2. Ganti tulisan berwarna merah dengan widget yang akan dijadikan melayang
3. Save template!

Cara Mengetahui Widget ID

Di mana widget ID? Ini contohnya, widget ID Categories/Label

Demikian dua Cara Pasang Sticky Sidebar di Blogger - Widget Sidebar Tetap Muncul Saat Scroll ke Bawah.*