Add Back To Top Button For Beautiful Blogger

Hi guys, the back to top button is a button that is considered indispensable for a Blog or a certain website, if it’s short, don’t say it, but if it’s long, it’s a bit annoying. In today I would like to show you how to add the Back To Top Button to blogger, let’s get started!

Add Back To Top Button For Beautiful Blogger


This Button is basically not written by me, but I collected it online and brought it back for those of you who are in need, I’m also using it!

Add back to top button to Blogger

First of all, a little more to say that this back to top button uses Font Awesome to make it pretty.

Step 1: You insert the following css above ]]></b:skin>

/* Back To Top */ 
.backtotop { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    cursor: pointer; 
    font-size: 25px; 
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%); 
    padding: 10px; 
    background-color: #138882; 
    opacity: .6; 
    color: #fff; 
    text-align: center; 
    width: 45px; 
border-radius:5px;} 
.backtotop:hover{opacity:1}

Step 2: Add the following HTML and Js above the closeable </body>

<div class=’backtotop’><i class=’far fa-hand-point-up’/></div>
<script type=’text/javascript’>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(“.backtotop”).fadeIn():$(“.backtotop”)) .fadeOut()}),$(“.backtotop”).click(function(){return $(“html,body”).animate({scrollTop:0},800),!1})}) ;
</script>

Save the template and see the result!

Epilogue

Okay, so I just showed you how to add a Back to top button to a blogger quite simply, hope you guys like it! Good luck!
Click to rate this post!
[Total: 0 Average: 0]
6
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x