Cara Membuat Tombol Back To Top di Blog
Thursday, February 13, 2014
Add Comment
Assalamualaikum...Halo Sobat J4rviz .... Pada Kesempatan kali ini J4rviz Blog Akan Share Tutorial Memasang Tombol Back To Top di Blog dengan Efek Smooth
Sebelumnya efek smooth itu seperti apa sih ?
Fungsi dari Pemakaian Efek smooth scrolling ini selain mempercantik tampilan komentar baru yang baru tampilkan juga berfungsi sebagai penanda bahwa komentar yang berefek adalah yang baru saja ditampilkan, selain itu tidak akan menambah Loading blog sobat masing-masing.
Fungsi dari Pemakaian Efek smooth scrolling ini selain mempercantik tampilan komentar baru yang baru tampilkan juga berfungsi sebagai penanda bahwa komentar yang berefek adalah yang baru saja ditampilkan, selain itu tidak akan menambah Loading blog sobat masing-masing.
Oke Deh Langsung Aja :
a. Buka Dashboard Blog
b. Masuk Ke Tempate
c. Pilih Edit Template
d. Centang Pada Expand Template Widget
e. Dan Ikuti Cara Di bawah ini
1. Css
Cari Code <style type='text/css'> Atau ]]><b:skin>
Jika Sobat Menemukan Code <style type='text/css'> Copy Code di bawah dan Paste di Bawah Code <style type='text/css'>
Jika Sobat Menemukan Code ]]><b:skin> Copy Code Di Bawah dan Paste Di atas Code ]]><b:skin>
/*back to top
----------------------*/
#BounceToTop {background:#2c3e50;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#3d566e;}
#BounceToTop:before {content:""; position:absolute; bottom:15px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:15px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #2c3e50 transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #3d566e transparent;}2. Javascript
Cari Code <body> jika Sudah.. Copy dan Paste Code Dibawah Di bawah Code <body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>500) { $('#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. HTML
Cari Code </body>
Copy Code Di Bawah Dan Taruh Di Atas Code </body>
<div id='BounceToTop'></div>Sekian Dari Saya.... Semoga Artikel ini Bermanfaat
terima kasih sudah mau berkunjung dan jangan lupa Komen + Follow Blog ini Untuk Mengikuti Update Terbaru J4rviz Blog
Wassalamualaikum...
terima kasih sudah mau berkunjung dan jangan lupa Komen + Follow Blog ini Untuk Mengikuti Update Terbaru J4rviz Blog
Wassalamualaikum...
0 Response to "Cara Membuat Tombol Back To Top di Blog"
Post a Comment