Cara Membuat Tombol Back to Top Keren di Blog - Banyak desain back to top yang bisa kita pasang pada blog, namun kali ini saya akan share Smooth Back to Top dengan jQuery. adapun fungsi dari Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger adalah cara pintas untuk kembali ke halaman atas. Dengan Tombol Back to Top maka untuk kembali keatas sangat mudah, kita tidak perti pake scroll karena tinggal klik tombol langsung otomatis kembali keatas.
Cara Membuat Tombol Back to Top Keren di Blogger tentunya sangat membuat nyaman pengunjung, ini sebagai alternatif yang sangat cepat untuk membaca artikel yang ada dalam blog. apa lagi yang pakai laptop yang gak pake mouse ini tentunya sangat bermanfaat. untuk membuatnya juga sangat mudah untuk dipraktekkan.
Untuk penempatan Tombol Back to Top / Kembali ke atas yang akan saya share kali ini ada dua cara yaitu berada di bawah samping kanan dan bawah berada di tengah. Sobat blogger juga bisa menyesuaikan warna yang tepat untuk template blog agar terlihat lebih menarik dan keren.
Nah,,, untuk memasangnya sobat ikuti Tutorial dibawah ini, yuk simak bareng!!!!
1. Login akun Blogger sobat.
2. Pada Dashboard pilih Template » Klik Edit HTML
3. Sekarang sobat cari kode ]]></b:skin>, jika sudah ketemu Letakkan kode berikut ini dibawah kode ]]></b:skin>
2. Pada Dashboard pilih Template » Klik Edit HTML
3. Sekarang sobat cari kode ]]></b:skin>, jika sudah ketemu Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#1E90FF;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>
Kode diatas hasilnya Tombol Back to Top berada di bawah samping kanan, Berikut screenshootnya:
Atau dengan kode dibawah ini:
<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#1E90FF;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:35px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 10px;}
#backtop::after{content:"";position:absolute;top:-5px;left:10px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
#backtop{left:50%;}
</style>
Kode diatas hasilnya Tombol Back to Top berada di bawah dan tepat di tengah, Berikut screenshootnya:
4.Setelah sobat pilih salah satu kode diatas, Selanjutnya letakkan kode berikut ini diatas kode </body>
div id='backtop'>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>
5. Simpan Template dan Lihat hasilnya.
Sekian dulu share kali ini Cara Membuat Tombol Back to Top Keren di Blog, semoga dapat bermanfaat. Silahkan sobat berkreasi untuk merubahnya sesuai dengan keinginan. Selamat Mencoba. Sobat juga bisa baca : Cara Membuat Tombol Back to Top Keren dengan gambar sendiri di Blog.
