To ensure additional benefit to the readers of the blog and styling to enhance the design, a simple and effective way is the Back to Top Button. You might have seen a lot of time, a blog post is much bigger, so after the end of the post is to come up with the mouse to reach the top. For this sometimes the reader of the post gets annoying. Back to Top button to your blog increase readers credibility as well as protect them from the frustrations.
CSS3 and JavaScript combination has been made of it entirely. Font Awesome has been used as an icon. The reader can reach at the top position smoothly by clicking the button.
How to add to a blog?
- Login first into your blog.
- The Template> click on Edit Html.
- Now, from the keyboard by pressing Ctrl + F search ]]></b:skin> section.
- Paste the following Css codes above the ]]></b:skin> tag.
/* Back To Top Button-------------------------------------- */.back-to-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#0c9b81;color:#fff;width:45px;height:45px;line-height:44px;right:25px;bottom:-25px;border-radius:50px;transition:all 0.5s ease-in-out;transition-delay:0.2s}.back-to-top:hover{background-color:#0caa8e;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s}.back-to-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:25px}.back-to-top i.fa{font-size:28px;line-height:inherit}
- Again, from the keyboard by pressing Ctrl + F search </head> section.
- Then paste the following Scripts above the </head> tags.
<script type='text/javascript'>//<![CDATA[$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.back-to-top').addClass('show'); } else { $('.back-to-top').removeClass('show'); } }); $('.back-to-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>
- Back to the keyboard by pressing Ctrl + F and search </body> part.
- Then paste the following codes above the </body> tag.
<div class='back-to-top'> <span class='back-to-top-icon'> <i class='fa fa-angle-up'/> </span></div>
- Finally, Save the template. That's all.
