The sidebar widget is an important component in the template, usually this widget consists of Popular Posts or the most popular posts, Labels, Archives, Recent Posts, Subscribe boxes, Author profiles and many more. It depends on the template maker itself, what to install on the widget template it makes. Then there are also those that make the widget display float. This floating widget is called a fixed-sticky or sticky widget.
The floating sidebar widget means that if we scroll down on the blog, the widget will still follow up to the specified point. In this tutorial, I will share how to make a floating widget on a blog template and stop at the footer. Let's go straight to the steps.
How to Install a Responsive Sticky Sidebar
1. Login to your blogger, select a theme and select edit HTML. Put the following code above</body><script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-widget1
').length)
var el = $('#sticky-widget1');
var stickyTop = $('#sticky-widget1').offset().top;
var stickyHeight = $('#sticky-widget1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {el.css({position: 'fixed',
top: 20})else {el.css('position', 'static');}
if (limit < windowTop) {var diff = limit - windowTop;el.css({top: diff
});}});}});
//]]>
</script>pay attention to the marked area, replace the code with the sidebar code belonging to your blog template, because each template owner usually gives a different name to each created template.
#sticky-widget1is a widget that will be made sticky / floating
Meanwhile#footer-wrapper is sticky stopping point
2. Next, make additions to the size of the width or sticky width that will be created. We recommend that you follow the size of your sidebar to make it look neater. for example like the following
#HTML2{width:100%;max-width:276px}#sticky-widget1{width:100%;max-width:276px}the max-width used is the width of the sidebar on your blog template, so adjust the widthPlease check carefully the name of the widget that you want to give the sticky effect so that the use of this trick can be successful
3. At the above steps, if you have done everything correctly then sticky will work. However, for a responsive display, you should add the following CSS code:
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}}If you already have a code in your template @media only screen and (max-width:768px){, then just save the code #sticky-widget1{width:100%;max-width:100%}below.
For the results, please look at the Recents Post Sidebar that I use.
That's it for this tutorial on how to make sticky or floating widgets on blogger
Source: http://www.arlinadzgn.com/2015/12/cara.buat.sticky.widget.di.sidebar.blog.html
Posting Komentar
image quote pre code