Home » » Cara Membuat Back To Top Dengan Smooth Jquery

Cara Membuat Back To Top Dengan Smooth Jquery

Cara Membuat Back To Top Dengan Smooth Jquery

Cara Membuat Back To Top dengan Smooth Jquery - Hoax Blogger akan mengulas tentang Tips Blogger dengan Tema Cara Membuat Tombol Back To Top atau Tombol Kembali Keatas. Cara ini dapat memudahkan pengunjung kembali ke atas dengan sentuhan Mouse yang berada dikanan bawah blog. Jadi pengunjung tidak usah repot repot untuk menaik Scroll Mouse atau Scroll Bar pada blog lagi. ayo kita lihat proses pembuatanya.

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template >> Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>


<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>


4. Kemudian letakkan kode berikut ini diatas kode </body>


<div id='backtop'>Back to Top</div>
<!-- ho-ax.blogspot.com -->
<script type='text/javascript'>
<!-- Hoax Blogger Start -->
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
<!-- Hoax Blogger End -->
</script>


5. Simpan Template

Cara Membuat Tombol Back To Top Dengan Smooth Jquery sangat mudah bukan ? sekian dulu dari Hoax ya.. hehehehe Terima kasih semua..

Jangan Lupa Komentar dan Likenya untuk artikel ini semoga masuk goolge :D

0 komentar:

Poskan Komentar