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

Putra Kefa
Putra Kefa
Updated:

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 !! ^_^

tips dan trik blogger blogspot Widget
Post a Comment