How to Make a Cool Back to Top Button on Blogger
Installing a back to top button or back to top button is no longer strange, most template designers or template makers have added this back to top button feature to the templates they make.
Maybe some of you still haven't installed the back to top button widget on your blog, this time I will try to make a back to top button to install on blogger.
This back to top button has a simple but cool design with the addition of awesome fonts.
This button will appear when someone scrolls or scrolls down your blog page, after that a back to top button will appear in the bottom right corner.
READ MORE
Using the back to top button on Blogger will help readers more easily return to the top of Blogspot.
It will be more effective if you use it on blogs or websites that have long articles or lots of comments so that readers or blog visitors don't scroll or swipe up again, with just one click of the back to top button they will go straight back to the section. up automatically.
This button is also equipped with a smooth scroll effect, so when the back to top button is clicked it will scroll up with a smooth scroll effect.
Immediately, if you want to add a back to top button on Blogger, please follow the steps below.
How to Make a Back to Top Button on a Blog
1. Entered into Blogger.com
2. Clik Theme > Edit HTML
3. Put this css code before
3. Put this css code before
Code
4. Then add this code before the code
]]></b:skin> atau </style>/* Back to top button caramanual.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 caramanual.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 the article about how to make a back to top button on blogger, hopefully it's useful
Video Ronaldo
0 Comments