Cara Bikin Back To Top Keren Dengan Efek Bounce

Bookmark and Share



IlhamiZation- Sore Sahabat blogger!. bingung nyari cara gimana bikin Back To Top dengan Efek Keren?... ndak usah bingung karena saya sudah mempersiapkan tutorial ini kepada kalian semua!.

langsung aja ya!.

  • Pertama buka Blogger > Rancangan > Edit HTML > jangan lupa klik  Expand Template Widget
  • Kalo Udah Copy Kode dibawah ini!

#toTop {        text-align:center;        position:fixed;         bottom:0px;         right:10px;        cursor:pointer;        display:none;        color:#000;        font-family:verdana;        font-size:11px;} 
  • Taruh Code diatas, diatas tag ]]></b:skin>
  • Oke! Lanjut ke kode </head> n taruh script di bawah ini, dibawah kode </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>  
  • kalo udah Copy kode dibawah ini!

<div id='toTop'><!--  Back to top animation written by farizemo | edited by ilham mboh  --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div> 
Lalu klik 
SIMPAN TEMPLATE

NB : http://picturestack.com/408/690/3RMToTopyonbijEz.png dapat kamu ganti dengan url gambarmu sendiri
Lihat Hasilnya!
Script saya copy dari Sini dengan sedikit pengubahan!

Sekian mas bro semoga berhasil n bermanfaat!

{ 0 komentar... Views All / Send Comment! }

Posting Komentar