Februari 05, 2014
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 :) . 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 Galpock-blogspot
Sumber Galpock-blogspot
Label :
Tips N Trick,
Langganan:
Posting Komentar (Atom)
0 komentar