Setelah sebelumnya saya juga pernah membahas tentang cara membuat tombol back to top, untuk kali ini saya membuat yang lebih komplit. Seperti gambar di atas, ada tombol back to top, bottom, home dan juga refresh. Tujuannya kita menempatkan tombol tersebut yaitu untuk mempermudah pembaca. Mereka tidak perlu scroll mouse naik turun tetapi cukup 1 kali klik mau ke atas, ke bawah, beranda atau refresh. Oke langsung saja berikut cara-caranya:
 |
| Tombol Back to Top, Home, Bottom dan Refresh |
2. Cari kode ]]></b:skin> (gunakan CTRL+F)
3. Copy-Paste kode berikut tepat sebelum / diatas kode ]]></b:skin>:
#bangiz { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+Note: Yang berwarna merah merupakan posisi dari tombol-tombol tersebut. Silahkan ganti jika tidak sesuai.
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#bangiz a
{ filter:alpha(opacity=65); -moz-opacity:0.65; opacity:0.65; border:0; } #bangiz img { border:0; } #bangiz a:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
Copy -Paste kode berikut sebelum / diatas kode </body> lalu Simpan Template.
<a name='bng-widget'/>4. Tambahkan kode HTML/Javascript berikut:
Dasbor blogger > Tata Letak > Tambahkan Gadget.
<div id='bangiz'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJm1RM3OzhxWSEptYsbgXYrr6wNBV-QOzCBWXe4E2XB5fdNE1IvkMnJjSVOt5zp55DNo5MUJE7NqRZmREjYAFLFQGRGf_fbIQkCGsInhXyFTVD_FLXaYFxZaeQ0TcFcBsJbatyPvxSrD8/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPbJD_lWSSWWz-o6qnYRgx2dqV-inblPWWihuhLZwtW5zacXE3SkqA6DVGWtlpPB7__z6eYMlkGu54HIHfVIBeQ6S4K46XfqmYE3InkhI3H0Le1mZIChog-PBytRMewYLxio-3KCElpU/s320/pre-icon1.png'/></a></td>
<td><a href='#bng-widget' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_6gHbPQ7tWChlZkAmftzmkjcJel18phoQMJVwNyecWb2Vx8TKj0mcE46WP04CMm_DmgMymxG2F0AoHroD1pRWOUgcKRy6yV_KTpHWp2TxRuep76AhATHpiHlkNt1eFZtZpH20wsAQpnw/s320/next-icon2.png'/></a></td>
<td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0kc7QYS887ij5Vg3DXhKYrWlDD-AmaVV8RSyoM8p4X5Q-qITATwllhmtqB0tCUp_j5-1gUcSofv6gZ5O6r80Rf-NPLqBffMmTmleCWzcWErJ6o8IevK5XguFTl1hfiysul7fLjuTvgo/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
5. Simpan dan lihat hasilnya.
Sekian blogging tips kali ini tentang bagaimana cara membuat tombol back to top, home, bottom, dan refresh. Jangan lupa ikuti kami untuk mendapat tips menarik lainnya.
