Cara Pasang atau Membuat Tombol Back To Top Dengan Before And AfterCara Pasang atau Membuat Tombol Back To Top Dengan Before And After

Sobat bloggers,sebelumnya saya sudah share tips "Pasang Tombol Smooth Scroll Back To Top dengan jQuery di Blogspot" kali ini kita akan membuat membuat tombol back to top atau scroll to top
dengan menggunakan kode CSS   :before dan :after sehingga tidak menggunakan gambar.
Script ini dikembangkan dari tips Blog Kang Ismet, karena scriptnya lebih simple dan memiliki efek bounce pada halaman ketika sampai ke atas.

Langkah/Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After

1. copy script di bawah ini, dan taruh 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> 

2. Silahkan Anda copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

 #BounceToTop 
{background:#D2D2D2;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:&quot;&quot;; 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:&quot;&quot;; 
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:&quot;&quot;; 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;} 


3. Simpan kode di bawah ini tepat di bawah kode javascript yang ada pada langkah 1.

 <div id='BounceToTop'/> 

4. Save templatenya.


Tombolnya akan berada di sebelah kanan bawah blog Anda, dan penampakannya seperti pada gambar thumbnail di atas .



Seian tips Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After


Semoga berhasil, salam bloggers !! ^_^

Dilarang Copy-Paste artikel di blog ini dan apabila kami menemukan artikel dicuri tanpa mencantumkan sumber link blog Amplopcokelat.com maka tak segan akan kami laporkan !

Berlangganan artikel Gratis langsung via email...

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar