Home » , , , , » How To Add Animated Back To Top Widget To Blogger

How To Add Animated Back To Top Widget To Blogger

No comments
Step 1. First of all, you need to Sign into your blogger and Select your blog. 



Step 2. Now you need to Go to "Theme" tab. 



Step 3. Now from there click on “Edit HTML”.



Step 4. Now search  (using Ctrl + F) for the following text.


<b:skin><![CDATA[


Step 5. Now you need paste this code.


.td-scroll-up,span.backtotop{cursor:pointer;position:fixed;height:40px;width:40px}span.backtotop{z-index:5;font-size:25px;line-height:40px;-o-border-radius:2px;-ms-border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;bottom:10px;right:10px;background:0 0;text-align:center;color:#FFF}.backtotop:hover{background:#464646}.td-scroll-up{background-color:#3b5998;bottom:4px;right:5px;z-index:9999;transform:translate3d(0,70px,0);-webkit-transform:translate3d(0,70px,0);-moz-transform:translate3d(0,70px,0);-ms-transform:translate3d(0,70px,0);-o-transform:translate3d(0,70px,0);-webkit-transition:transform .4s cubic-bezier(.55,0,.1,1) 0s;-moz-transition:transform .4s cubic-bezier(.55,0,.1,1) 0s;-o-transition:transform .4s cubic-bezier(.55,0,.1,1) 0s;transition:transform .4s cubic-bezier(.55,0,.1,1) 0s}.td-scroll-up-visible{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,00,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0)}.td-scroll-up .td-icon-menu-up{position:relative;color:#fff;font-size:20px;display:block;text-align:center;width:40px;top:7px}.td-icon-menu-up:before{content:'\f077'}[class*=td-icon-]{line-height:1;text-align:center;display:inline-block}[class*=" td-icon-"]:before,[class^=td-icon-]:before{font-family:FontAwesome;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Step 6. Now Paste this Phrase under “<head>”.


<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script>
$(function(){
$(document).on( &#39;scroll&#39;, function(){
if ($(window).scrollTop() &gt; 100) {
$(&#39;.td-scroll-up&#39;).addClass(&#39;td-scroll-up-visible&#39;);
} else {
$(&#39;.td-scroll-up&#39;).removeClass(&#39;td-scroll-up-visible&#39;);
}
});
$(&#39;.td-scroll-up&#39;).on(&#39;click&#39;, scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != &#39;undefined&#39; ? verticalOffset : 0;
element = $(&#39;body&#39;);
offset = element.offset();
offsetTop = offset.top;
$(&#39;html, body&#39;).animate({scrollTop: offsetTop}, 500, &#39;linear&#39;);
}
</script>  
Step 8. Now Paste this HTML code below <body> tag.



<div class='td-scroll-up'><i class='td-icon-menu-top'></i></div>

Step 8. Now Save theme.




That’s it! you are done.
So above is all about How To Add Animated Back To Top Widget to Blogger. With the above method, you can easily get Back to Top button in your website very easily. So I Hope you like this, do share with others too. Leave a comment below if you have any related queries with this.
Share:

0 comments:

Post a Comment

DISCLAIMER

The information provided on hottechtips.blogspot.com is to be used for educational purposes only. The website creator is in no way responsible for any misuse of the information provided. All of the information in this website is meant to help the reader develop a hacker defense attitude in order to prevent the attacks discussed. In no way should you use the information to cause any kind of damage directly or indirectly. The word “Hack” or “Hacking” on hottechtips.blogspot.com should be regarded as “Ethical Hack” or “Ethical hacking” respectively. You implement the information given at your own risk.