How to Make Back to Top Buttons on Blogger

CLINTON GULTOM   7/23/2019   BLOGGER   Comment  

Installing the back to top button or the back to top button is indeed not a strange thing anymore, most of the template designers or template makers have added this back to top button feature in the template they made.

Maybe some of you still have not installed the back to top button widget on the blog, this time I will try to make the back to top button to be installed on blogger.

This back to top button has a simple but cool design with awesome additional fonts.

This button will appear when someone scrolls or scrolls your blog page down, then a back to top button will appear in the lower right hand corner.

Using the back to top button on blogger will help readers to return to the top of the blogspot more easily.

It will be more effective if you use a blog or website that has a long article or a lot of comments so that readers or blog visitors do not scroll or move up again, just enough to click the back to top button they will immediately return to the top automatic.

This button is also equipped with a smooth scroll effect so when the back to top button is clicked then it will scroll up with a smooth scroll effect.

Immediately if you want to add the back to top button in blogger, please follow the steps below.

How to Make a Back to Top Button on a Blog

1. Log in to Blogger.com
2. Click Theme> Edit HTML
3. Place this css code before the code]]> </ b: skin> or </ style>

 /* Back to top button elbongultom.com */
.scroll-top-wrapper {
    position: fixed;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
 text-align: center;
 z-index: 99999999;
    background-color: #777777;
 color: #eeeeee;
 width: 50px;
 height: 48px;
 line-height: 48px;
 right: 30px;
 bottom: 30px;
 padding-top: 2px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
 background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
 opacity: 1.0;
}
.scroll-top-wrapper i.fa {
 line-height: inherit;
} 

4. Then add this code before the code </ body>

<!-- Back to top button elbongultom.com -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
 $(document).on( 'scroll', function(){
  if ($(window).scrollTop() > 100) {
   $('.scroll-top-wrapper').addClass('show');
  } else {
   $('.scroll-top-wrapper').removeClass('show');
  }
 });
 $('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
 verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
 element = $('body');
 offset = element.offset();
 offsetTop = offset.top;
 $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>

5. Click Save theme

That's an article about how to make the back to top button on blogger, hopefully useful.