This time Dn420 will share tips on this topic How to Install the Back To Top Button with SVG icon on blogger
What is the "Back To Top Button with SVG Icon"?
The Back To Top button with SVG has the same function as the back to top button as in the previous tutorial on this blog, the only difference is that the icon on this button uses SVG which is lighter than the image format icon. This is the best way to encourage users to browse more content quickly.
Why do we need to use "Back To Top Button with SVG Icon on our blog"?
The Back To Top button with SVG has a very important role for a site with content that has long page content, for those sites that have a lot of information on the page will make other content skip unwittingly scrolling far when down the page.
Alright, for those who want to install it perfectly please follow these simple steps:
How to Install Back To Top Button with SVG?
The first step, open Blogger Dashboard > Then Click the Theme menu > Next Click Edit HTML next to customize > Then add the code below right before </head> tag.
<style>
/* Back To Top by Dn420 */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>Next, add the two codes below before </body> tag
<div class='backtotop hide'><svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div><script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>When all steps are complete the next step Save the theme and that's it see the results on your blog.