Tombol To Top

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.

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> 

<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 hasilnya Tombol Back to Top berada di bawah samping kanan, Berikut screenshootnya:

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.

Kalau semuanya dipasang dengan benar hasilnya seperti yang sobat lihat pada blog saya ini.

Sekian dulu share kali ini Cara Membuat Tombol Back to Top di Blog, semoga dapat bermanfaat. Silahkan sobat berkreasi untuk merubahnya sesuai dengan keinginan. Selamat Mencoba.

Categories: Tip Bloger