Hari-hari ini semakin banyak yang menambahkan tombol back to top pada blog atau websitenya. Tombol ini biasanya diletakkan di bagian bawah sebelah kanan dan juga diberi efek fadein - fadeout. Tombol ini dibuat tidak terlihat dan baru akan muncul ketika halaman di-scroll ke bawah. Tapi semuanya bisa diubah sesuai selera masing-masing.
Nah, jika sebelumnya Xceria menulis tutorial singkat mengenai cara menghapus blog blogspot, kali ini Xceria akan menulis tutorial mengenai cara membuat tombol back to top.
Di bawah ini ada 5 pilihan tombol kembali ke atas yang bisa digunakan dengan gratis.
Anda juga bisa menambahkan efek transparan pada scroll to top button saat hovering. Untuk melakukannya, pertama cari kode </b:skin>, lalu tambahkan kode CSS berikut di atasnya.
Untuk membuat tombol dengan kreasi Anda sendiri lihat artikel Xceria tentang cara membuat kreasi tombol back to top dengan CSS.
Sekian tutorial tentang cara memasang tombol sroll to top. Semoga berguna.
Nah, jika sebelumnya Xceria menulis tutorial singkat mengenai cara menghapus blog blogspot, kali ini Xceria akan menulis tutorial mengenai cara membuat tombol back to top.
Sekilas Tentang Tombol Back to Top
Tombol ini berguna bagi pengunjung untuk dapat pindah ke bagian paling atas dengan cepat dan smooth atau lembut. Dengan menampilkan tombol ini, pengunjung akan lebih mudah dalam menavigasi halaman blog Anda. Selain itu blog atau website akan terlihat lebih profesional di mata pengunjung. Langsung saja simak langkah-langkah berikut jika ingin memasangnya.Memasang Script "Back to Top Button"
Cari kode </head>, letakkan kode berikut di atasnya.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
Related Articles
Anda bisa mengubah angka (100) berwarna merah di atas untuk menentukan kapan tombol akan muncul. Misalnya diubah menjadi 1000, maka halaman harus di-scroll lebih ke bawah agar tombol muncul.
Menambahkan Kode CSS dan HTML "Scroll to Top"
Tambahkan kode berikut di atas kode </body><style type='text/css' scoped='scoped'>
#ScrollToTop {z-index: 10; text-align: center; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none;}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='http://3.bp.blogspot.com/-lzikuMli8-M/VR40x3ydSkI/AAAAAAAADh8/kZI4BTk2OiI/s1600/back-to-top-button.png'/></div>
#ScrollToTop {z-index: 10; text-align: center; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none;}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='http://3.bp.blogspot.com/-lzikuMli8-M/VR40x3ydSkI/AAAAAAAADh8/kZI4BTk2OiI/s1600/back-to-top-button.png'/></div>
Posisi Tombol Back to Top
Ubah angka (20px) berwarna merah untuk mengatur posisi tombol.Gambar Tombol Back to Top
Untuk mengganti gambar tombol, ubah tulisan warna biru di atas dengan url tombol yang Anda inginkan.Di bawah ini ada 5 pilihan tombol kembali ke atas yang bisa digunakan dengan gratis.
Anda juga bisa menambahkan efek transparan pada scroll to top button saat hovering. Untuk melakukannya, pertama cari kode </b:skin>, lalu tambahkan kode CSS berikut di atasnya.
#ScrollToTop img {filter: alpha(50); opacity: 0.50;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}
Untuk membuat tombol dengan kreasi Anda sendiri lihat artikel Xceria tentang cara membuat kreasi tombol back to top dengan CSS.
Sekian tutorial tentang cara memasang tombol sroll to top. Semoga berguna.
