728x90 AdSpace

.

Latest News

samedi 11 octobre 2014

Installing Smooth Back To Top Blog

Installing Smooth Back To Top Blog 

Maybe it's many scattered on the internet on how to install the tutorial back to top button on the blog and this time I will share tips on the tutorial. 

The role and function of the button back to top itself is quite important which makes it easy for visitors who wish to return to top of page mengscroll by just clicking one button. 


Note: If the existing template back to top button, please remove it first. 


The following installation methods: 

1 Log in to Blogger Dashboard> select blogs> select Template> then click Edit HTML, save the following code after the <head> or before </ head>
HTML
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
If your template is mounted Fontawesome above, ignore the first step up to the next step. 


2 Keep CSS below before ]]> </ b: skin> or </ style>
CSS
.smoothscroll-top {    position:fixed;    opacity:0;    visibility:hidden;    overflow:hidden;    text-align:center;    z-index:99;    background-color:#2ba6e1;    color:#fff;    width:47px;    height:44px;    line-height:44px;    right:25px;    bottom:-25px;    padding-top:2px;    border-radius:5px;    transition:all 0.5s ease-in-out;    transition-delay:0.2s;}.smoothscroll-top:hover {    background-color:#3eb2ea;    color:#fff;    transition:all 0.2s ease-in-out;    transition-delay:0s;}.smoothscroll-top.show {    visibility:visible;    cursor:pointer;    opacity:1;    bottom:25px;}.smoothscroll-top i.fa {    line-height:inherit;}
  3. Simpan jQuery dan HTML di bawah ini sebelum </body>
SCRIPT
<div class="smoothscroll-top">    <span class="scroll-top-inner">        <i class="fa fa-2x fa-arrow-circle-up"></i>    </span></div><script type='text/javascript'>//<![CDATA[$(function(){     $(document).on( 'scroll', function(){         if ($(window).scrollTop() > 100) {            $('.smoothscroll-top').addClass('show');        } else {            $('.smoothscroll-top').removeClass('show');        }    });     $('.smoothscroll-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>
 4 After that save the template and see the results.
With the addition of the bounce effect
SCRIPT
<div class="smoothscroll-top">    <span class="scroll-top-inner">        <i class="fa fa-2x fa-arrow-circle-up"></i>    </span></div><script type='text/javascript'>//<![CDATA[$(function(){     $(document).on( 'scroll', function(){         if ($(window).scrollTop() > 100) {            $('.smoothscroll-top').addClass('show');        } else {            $('.smoothscroll-top').removeClass('show');        }    });     $('.smoothscroll-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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);}//]]></script>
For color settings and others can edit again according to taste, so from me. Good morning and hopefully useful.
Installing Smooth Back To Top Blog
  • Blogger Comments
  • Facebook Comments

0 commentaires:

Enregistrer un commentaire

Top