oday we are here with the cool blogger widget that is How To Add Animated Back To Top Widget to Blogger. If your blog topic from those categories which has longer articles, then this widget is best work for you. So have a look on complete guide discussed below to proceed.
Steps To Add Animated Back To Top Widget to your Blogger:
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.
Step 2. Now you need to Go to "Theme" tab.
Step 4. Now search (using Ctrl + F) for the following text.
<b:skin><
Step 5. Now you need paste this code.
Step 6. Now Paste this Phrase under “<head>”..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}
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 8. Now Paste this HTML code below <body> tag.<script>$(function(){$(document).on( 'scroll', function(){if ($(window).scrollTop() > 100) {$('.td-scroll-up').addClass('td-scroll-up-visible');} else {$('.td-scroll-up').removeClass('td-scroll-up-visible');}});$('.td-scroll-up').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>
<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.
0 comments:
Post a Comment