Terdapat banyak sekali macam sticky widget (widget melayang) yang sanggup diterapkan pada Blogger/Blogspot. Salah satunya yaitu widget sticky sidebar: stick to bottom when scrolling down, and top when scrolling up. Artinya, widget yang melekat bab bawah jikalau scrollnya ke bawah, dan widget yang melekat bab atas jikalau kita scroll halaman blog/website ke atas.
Model widget sidebar menyerupai itu sanggup Anda lihat pribadi di website Jalantikus.com (halaman postingan), sangat keren bukan? Cara ini juga aku sudah terapkan pada template Viralisme Theme dan Risen Template (semua versi). Silahkan lihat demonya dengan klik tombol di bawah:
Nah melalui tutorial ini aku akan kasih tau bagaimana caranya pasang widget sticky sidebar menyerupai itu di platform Blogger/Blogspot.
Namun tidak menutup kemungkinan jQuery dari sticky sidebar ini sanggup juga diterapkan pada platform lain menyerupai WordPress. Jika Anda tidak berminat memakai pluginnya.
Cara Pasang Museo @font-face, Font yang Digunakan Jalantikus
Caranya mudah, Anda hanya perlu membaca secara seksama dan menerapkan dengan benar tutorialnya berikut ini:
2. Setelah itu masuk ke Edit HTML, hapus dulu semua html widget sidebar blog (tidak termasuk CSS-nya), kemudian ganti dengan instruksi di bawah ini:
3. Letakkan instruksi jQuery berikut ini sempurna di atas instruksi
4. Pastikan di template Anda sudah terpasang instruksi jQuery library berapapun versinya, misalnya yang menyerupai ini:
Letakkan instruksi tersebut di atas instruksi
5. Jika ingin menghentikan atau men-stop fungsi sticky sidebar pada ukuran device/perangkat tertentu, maka tinggal menambahkan css
Contoh, aku tidak ingin mengaktifkan fungsi sticky sidebar di ukuran device
6. Simpan Theme, selesai!
Untuk langkah nomor 4 dan 5, sanggup diganti dengan opsi lain, yaitu memakai Conditional Javascript. Fungsinya untuk menghilangkan (menonaktifkan) JavaScript atau jQuery pada ukuran device tertentu. Dengan cara berikut ini, maka secara otomatis fungsi Sticky Sidebar juga tidak akan berfungsi pada size device tertentu.
Caranya tinggal mengganti instruksi jQuery (pada langkah 4) di atas, dengan instruksi berikut ini:
Demikian tutorial wacana Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah. Semoga bermanfaat dan selamat mencoba!
Model widget sidebar menyerupai itu sanggup Anda lihat pribadi di website Jalantikus.com (halaman postingan), sangat keren bukan? Cara ini juga aku sudah terapkan pada template Viralisme Theme dan Risen Template (semua versi). Silahkan lihat demonya dengan klik tombol di bawah:
Nah melalui tutorial ini aku akan kasih tau bagaimana caranya pasang widget sticky sidebar menyerupai itu di platform Blogger/Blogspot.
Namun tidak menutup kemungkinan jQuery dari sticky sidebar ini sanggup juga diterapkan pada platform lain menyerupai WordPress. Jika Anda tidak berminat memakai pluginnya.
Cara Pasang Museo @font-face, Font yang Digunakan Jalantikus
Caranya mudah, Anda hanya perlu membaca secara seksama dan menerapkan dengan benar tutorialnya berikut ini:
Tutorial memasang Widget Sticky Sidebar yang mengikuti scrolling di blog/website
1. Login ke Blogger, masuk ke Tata Letak atau Layout, kemudian backup dulu instruksi atau script di widget sidebar blog Anda. Kayak script iklan, recent post, dll.2. Setelah itu masuk ke Edit HTML, hapus dulu semua html widget sidebar blog (tidak termasuk CSS-nya), kemudian ganti dengan instruksi 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>
Perhatian:
Sebetulnya tidak perlu juga menghapus instruksi sidebar, dengan catatan attribute
Biasanya instruksi pembungkus sidebar terluar (baik itu attribute
Sebetulnya tidak perlu juga menghapus instruksi sidebar, dengan catatan attribute
ID atau Class pembungkus HTML sidebar yang akan dipakai pada instruksi $(document).ready(function(){$("#sidebar-wrapper") (di langkah selanjutnya), berada dibagian terluar dari seluruh attribute ID atau Class untuk sidebar.Biasanya instruksi pembungkus sidebar terluar (baik itu attribute
ID atau Class) diterapkan CSS menyerupai ini:#sidebar-wrapper {width:100%;max-width:300px;padding:0;margin:0 auto;float: right;position:relative;overflow:hidden}
3. Letakkan instruksi jQuery berikut ini sempurna di atas instruksi
</body> atau instruksi <!--</body>--></body><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>
4. Pastikan di template Anda sudah terpasang instruksi jQuery library berapapun versinya, misalnya yang menyerupai ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Letakkan instruksi tersebut di atas instruksi
</head> atau </head><!--<head/>-->5. Jika ingin menghentikan atau men-stop fungsi sticky sidebar pada ukuran device/perangkat tertentu, maka tinggal menambahkan css
#sidebar-wrapper{overflow:visible}Contoh, aku tidak ingin mengaktifkan fungsi sticky sidebar di ukuran device
768px hingga ke ukuran device kebawahya/terkecil:@media screen and (max-width:768px){
#sidebar-wrapper{overflow:visible}
}
6. Simpan Theme, selesai!
Untuk langkah nomor 4 dan 5, sanggup diganti dengan opsi lain, yaitu memakai Conditional Javascript. Fungsinya untuk menghilangkan (menonaktifkan) JavaScript atau jQuery pada ukuran device tertentu. Dengan cara berikut ini, maka secara otomatis fungsi Sticky Sidebar juga tidak akan berfungsi pada size device tertentu.
Caranya tinggal mengganti instruksi jQuery (pada langkah 4) di atas, dengan instruksi berikut ini:
<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
// 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>
Catatan:
Perhatikan instruksi berikut ini:
Angka
Perhatikan instruksi berikut ini:
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
Angka
60em silahkan sesuikan dengan ukuran device yang ingin Anda menonaktifkan fungsi Sticky Sidebar.Demikian tutorial wacana Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah. Semoga bermanfaat dan selamat mencoba!
Advertisement