Back To Top With Bounce Effect

Yok ngeposting Trik Blogger lagi xD kwowkowkowkowk


Kali ini w ngeposting Back To Top With Bounce Effect ,untuk demo bisa liat di blog ku ini ^^

Nah ,Kalo mau buat ...simak baik baik yaa

1.Buka kun blogger kalian Klik rancangan lalu pilih Edit HTML
2.Centang Expand Template Widget dan cari kode ]]></b:skin>
3.Dan letakkan kode berikut diatasnya

#toTop {        text-align:center;        position:fixed;         bottom:0px;         right:10px;        cursor:pointer;        display:none;        color:#000;        font-family:verdana;        font-size:11px;}

4.Dan letakkan kode berikut dibawah </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() {    $(window).scroll(function() {        if($(this).scrollTop() &gt; 100) {            $(&#39;#toTop&#39;).fadeIn();            } else {            $(&#39;#toTop&#39;).fadeOut();        }    });

    $(&#39;#toTop &gt; img&#39;).click(function() {        $(&#39;body,html&#39;).animate({scrollTop:0},800)                .animate({scrollTop:25},200)                .animate({scrollTop:0},150)                .animate({scrollTop:10},100)                .animate({scrollTop:0},50);    });    });</script>

5.Lalu cari kode </body> dan letakkan kode berikut atasnya

<div id='toTop'<img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_pOkEiI-w0ZOmo1cyAC09_ZZv4g-hFVjzrNrCxpk6lcc6DpdaK-mly4rwxmWL5aKdNOa5s9sMfe141nNTcl-P4ocQBdopLls-ALpNqBcjUqQGjikacy4a038jkymy7fb8Poi1V8pAYE/s1600/back+to+top.png' style='margin-right:-9px'/></div>

Lalu save deh template kalian semoga bermanfaat

Share This:

Facebook Twitter Pinterest Linkedin Whatsapp Whatsapp

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.