Cara Membuat Smooth Scroll Back To Top di Blog


Tutorial Belajar Blog - Cara Membuat Smooth Scroll Back To Top di Blog. Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth scroll back to top / kembali ke atas. Smooth sendiri berarti lembut. Jadi smooth scroll artinya menggulung dengan lembut. Untuk membuat Tombol Back to Top biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.

Smooth Scroll Back To Top ini dimaksudkan sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Smooth Scroll Back To Top ini menggunakan Jquery mungkin pada tutorial selanjutnya lebih praktis


Tidak lupa saya ucapkan terima kasih untuk Mas Abdul Rahman yang sudah berbagi tips ini kemudian saya share kembali karena Tutorial Blog ini Merupakan request dari teman blogger.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut :

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>

<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

Selamat Mencoba dan semoga Bermanfaat Silahkan anda sesuaikan sendiri Baca Juga Cara Memberikan Pesan Aktifkan JavaScript Pada Blog

Thanks To MDF

8   komentar

gan sorry nih (ASK)
blog saya tida ada scrol template nya , padahal postingn saya masih panjang kebawah tapi ga ada scrol untuk kebawah nya gan , maksud saya Tampilan blog saya , bukan widget nya
Reply Delete
Gan, kalau Scroll to top diatas Buttonnya kan keluar dari bawah, gimana caranya kalau buttonnya keluar dari pojok kayak punya Agan ?
Reply Delete
Makasih bro Info nya
<< KuNJungI bAlLik yA sOb >>
http://harichigo.blogspot.com
Reply Delete
Ternyata saya coba menarik juga ya mas :D .
http://cyber-88.blogspot.com/2014/06/cara-membuat-memasang-smooth-scroll-back-to-top-pada-blog.html
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete
informasinya bermanfaat , setelah di pasang Smooth Scroll Back To Top sangat bagus gan , terima kasih


kunjungi juga : http://gilateknologi21.blogspot.com/
Reply Delete

Posting Komentar

Cancel Reply