Cara Menciptakan Tombol Back To Top Keren Di Blog

Cara Membuat Tombol Back to Top Keren di Blog -  Banyak desain back to top yang sanggup 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 yaitu cara pintas untuk kembali ke halaman atas. Dengan Tombol Back to Top maka untuk kembali keatas sangat mudah, kita tidak perti pake scroll alasannya yaitu tinggal klik tombol pribadi otomatis kembali keatas.

Cara Membuat Tombol Back to Top Keren di Blogger tentunya sangat menciptakan 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 gampang 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 sanggup menyesuaikan warna yang sempurna untuk template blog biar terlihat lebih menarik dan keren. 

Nah,,, untuk memasangnya teman ikuti Tutorial dibawah ini, yuk simak bareng!!!!

1. Login akun Blogger sobat.
2. Pada Dashboard pilih Template » Klik Edit HTML
3. Sekarang teman cari isyarat ]]></b:skin>, kalau sudah ketemu Letakkan isyarat berikut ini dibawah isyarat ]]></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:&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> 

Kode diatas kesannya Tombol Back to Top berada di bawah samping kanan, Berikut screenshootnya:

 Atau dengan isyarat 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:&quot;&quot;;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 kesannya Tombol Back to Top berada di bawah dan sempurna di tengah, Berikut screenshootnya:

4.Setelah teman pilih salah satu isyarat diatas, Selanjutnya letakkan isyarat berikut ini diatas isyarat </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 sanggup bermanfaat. Silahkan teman berkreasi untuk merubahnya sesuai dengan keinginan. Selamat Mencoba. Sobat juga sanggup baca : Cara Membuat Tombol Back to Top Keren dengan gambar sendiri di Blog.

Share this post