How to Install Back to Top button in Blogger

Shohag
How to install back to top button in blogspot blog - That was a lot of splatter on the internet on how to install the tutorial back to top button on blogger blog and this time I will share the tips about the tutorial how to install back to top button for blogger.
How to Install Back to Top button in Blogger

The role and functions of the buttons back to top itself is important enough that makes it easy for visitors who want that blogger page should be scrolled then first take back up of your blogger template.
Note: If an existing template back to top button, you should remove it first.

Here's is tutorial how to install back to top button in blogger

1. Login to Blogger Dashboard> select the blog> select Template> then click the Edit HTML, save the code below after the <head> or before </head> tag.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

If your blogger template is already installed with Font Awesome the above code showing in the first step, then ignore the first step up and follow the next step.

2. Save the css code before ]]></b:skin> or </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Save jQuery and HTML codes provided below, before the </body> tag

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

4. After doing this changes now save the template and see the results what you done.

now you will be happy to see that this back to top button with the additional effect of bounce has been added on the right bottom side of your blogspot hosted site. If you wanna make it better, then you can add the bellow codes for the duplicate of step 3 codes.

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

thanks for reading this tutorial

Source : http://www.sisourav.com/2016/01/how-to-install-back-to-top-button-in.html


0 Comments