Sabtu, 01 November 2014
Tombol back to top memiliki peran yang cukup penting bagi sebuah blog / website dengan konten yang memiliki halaman yang panjang, tanpa disadari menggulir jauh ke bawah halaman.
Sedangkan tombol ini berfunsi untuk melompat ke atas halaman dengan mudah dan singkat, daripada menggerakannya dengan mouse. Berikut Screenshot Back To Top Blog Hafiizh
Cara Membuat tombol back to top dengan mudah
- Klik Template > Edit HTML
- Cari kode </head> (gunakan CTRL+F mempermudah pencarian)
- Masukan kode di bawah ini di atas kode </head>
<script type='text/javascript'>*Keterangan
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
Warna merah menentukan jarak tombol back to top muncul dan tersembunyi
Warna kuning menentukan kecepatan saat melompat ke atas
- Cari kode ]]></b:skin>
- Masukan kode CSS dibawah ini di atas kode ]]></b:skin>
#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}*Keterangan
#ScrollToTop:hover{opacity:1;}
Warna hijau menentukan posisi dari tombol tersebut
- Cari kode </body>
- Masukan kode di bawah ini di atas </body>
<div id='ScrollToTop'><img alt='Back to top' border='0' height='45' src='http://perkypixels.in/images/backtotop.png' width='45'/></div>*Keterangan
Warna pink adalah link dari gambar tombol back to top, anda juga bisa mengganti gambar nya
- Klik Simpan Template
