Cara Membuat Tombol Back To Top Dengan Jquery

Hay Sobat Dunia Blogger 4rt Kali Ini Saya Akan Membawakan Tutorial Membuat Tombol Back To Top Dengan Jquery, Sobat Pasti Tau Kan Apa Itu Back To Top, Back To Top Adalah Suatu Widget Yang Di Gunakan Untuk Mengembalikan Posisi Keatas Biasanya Tombol Back To Top Berada Di Bawah, Kali Ini Saya Akan Membuat Script HTML untuk Widget Itu, Tombol Back To Top Lebih Keren Nih Kalian Liat 2 Gambar Di Atas Ada 2 Pilihan Yang No 1 Itu Berada Di Pojok Kalo No 2 Biasanya Berada Di Tengah Yuk Dari Pada Kelamaan Yuk Simak Cara Membuatnya

1. Masuk Ke Blog Sobat, Kalo Belum Buat Silahkan Buat

2. Masuk Ke Template > HTML

3. Sobat Letakkan Kode Script Kode Gambar 1/ Gambar 2 Tepat Di Atas Kode ]]></b:skin>

4. Style Gambar 1 Di Bawah Ini Klik Buka

<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:"";position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;} </style>

5. Style Gambar 2 Klik Buka

<style> #backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:darkred;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;left:80%; -moz-border-radius-topleft: 30px; border-top-left-radius: 10px;border-top-right-radius: 10px;} #backtop::after{content:"";position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;} </style>

6. Kemudian Letakkan Kode Di Bawah Ini Di Atas Kode </body>

<div id='Totop'> Back to Top</div> <script type='text/javascript'> //<![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})}); //]]> </script>

7. Terakhir Save Template Sobat Dan Liat Hasilnya

Demikian Tutorial Yang Saya Bawakan Untuk Sobat Blogger Jangan Lupa Kasih Komen, Folow, Dan Klik Iklan Yang Ada.. Terima Kasih

Posted by Unknown on Rabu, 27 November 2013 - Rating: 4.5

Title : Cara Membuat Tombol Back To Top Dengan Jquery
Description : Hay Sobat Dunia Blogger 4rt Kali Ini Saya Akan Membawakan Tutorial Membuat Tombol Back To Top Dengan Jquery, Sobat Pasti Tau K...

Share to

Facebook Google+ Twitter