Posted by : Muhammad Syaifullah Rabu, 02 Oktober 2013


Kali ini saya akan membagikan cara membuat back to top lagi nih ,udah lama ga post udah ganti template aja ya wkwk soalnya bosen template yang kemaren berat , nanti akan saya share dah templatenya :) . Kalo dipost sebelumnya Cara Membuat Tombol Back To Top Dengan Gambar yang efeknya smooth , sekarang saya akan post dengan efek bounce yang saya dapet dari blog Kompi Ajaib dan ada juga kodenya yang dia dapat di Kang Ismet

Berikut langkah-langkahnya :

1. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>
#BounceToTop {text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none;}#BounceToTop:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #A6A6A6 transparent; line-height:0;}#BounceToTop:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #464646 transparent; line-height:0 }#BounceToTop:after {content:""; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #D2D2D2 transparent; line-height:0;}
2. Copy kode ini dan simpan di atas kode </body>
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script
3. Kemudian simpan kode di bawah ini persis di bawah kode javascript yang dilangkah nomer 2
<div id='BounceToTop'/>
4. Terakhir silahkan save templatenya. Dan tombolnya akan berada di sebelah kanan bawah blog Anda, dan penampakannya seperti pada gambar thumbnail di atas atau pada tombol back to top blog ini (jika tombolnya belum saya ganti lagi hheehehe).

Ada sedikit perbedaan jika menggunakan trik ini, jika Anda klik tombol back to top-nya maka tidak akan ada penambahan kode (#top) pada link postingan yang akan tampak di address bar browser.

Selamat mencoba dan berkreasi...

Sumber : Kompi Ajaib dan Kang Ismet

{ 16 komentar... read them below or Comment }

  1. info bagus sob Comen and followback Sob www.akhmadraauf.blogspot.com/?m=1

    BalasHapus
  2. Info bermanfaat bagi saya
    Back ya www.elcyber31.blogspot.com

    BalasHapus
  3. nyoba dulu gan,, kelihatannya keren nihh,,

    koment back yaa www.ankurniawan.blogspot.com

    BalasHapus
  4. kren gan tombol back to topnya, sgt cocok untuk blog ane :)

    BalasHapus
  5. wah, ane mau coba dulu gan.
    oia template yang ini kayanya juga berat gan. apa koneksi internet ane yg lemot :D

    BalasHapus
    Balasan
    1. silakan aja gan :)

      hehe iya emang berat nih mungkin gara" gambar diheader itu , tapi masih mending yg ini dari pada template kemaren beratnya :D

      Hapus
  6. akhirnya nemu jg...
    thx..

    http://info-citra.blogspot.com/

    BalasHapus

Selamat Datang Di Blog Yang Aneh Ini
Thanks For Visiting ~

Kalo komentar yang enak enak aja ya jangan pake Anonymous kalo mau komen juga yang relavan ya dan kalo mau dikomenback bilang aja ga usah malu malu pastiku komenback ko kalo ga sibuk , dah gitu aja :v

> < HOME

Copyright © 2012-2016 Scairelys - Template by Johanes Djogan - Design by Muhammad Syaifullah