How to Install the Back To Top Button with SVG - BLOGHINT

How to Install the Back To Top Button with SVG

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.


The Back To Top button with SVG functions the same 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 an SVG which is lighter than the image format icon. This is one way to encourage users to browse more other content easily.

The Back To Top button with SVG has an important role for a site with content that has a long page content, for a site that has a lot of information on its page it will make other content skip without realizing it scrolls further down the page.

Alright, for those who want to install it please follow the steps below:

How to Install the Back To Top Button with SVG

The first step, open Blogger > Click the Themes menu > Click Edit HTML > Then add the code below just before</head>

<style>
/* Back To Top */
.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>

<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>

The next step Save the theme and see the results on your blog.

That's all for tips on How to Install the Back To Top Button with SVG , hopefully it's useful and issalam.

0 Response to "How to Install the Back To Top Button with SVG"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel