Cara Membuat Tombol Back to Top, Home, Bottom dan Refresh

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:

1. Masuk dasbor blogger > Template > Edit HTML

2. Cari kode ]]></b:skin> (gunakan CTRL+F)

    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+

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;

}

 Note: Yang berwarna merah merupakan posisi dari tombol-tombol tersebut. Silahkan ganti jika tidak sesuai

 3. Selanjutnya cari kode </body> 

     Copy -Paste kode berikut sebelum / diatas kode </body> lalu Simpan Template

 <a name='izurch-bangiz'/>

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/AVvXsEhOhb_Pxt_tixssH30ZNU3f15en4YbfK7l_hcbzzrhTBYuyAdq9K7SFlNnB_KzpwCL6GKb1XH_flVwskzewVWO_obLwz3eYkq_3JYauNue2sMhFlchs-dYyQMu2u8VdEmFMR51XIe-j3f8/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkNTGN-5ABIRdOT0Ok1Lgir-1DnYR3adZVmtZYfQZxaxVBdiyKvN4WMqaEIctqX0fCcQUgkf7Sds2rYebRpEpct10DUb6gHNCrL-SIriem4QLB_JGYlExqNM9PB1LzqTuOxF174bawbE/s320/pre-icon1.png'/></a></td>
<td><a href='#izurch-bangiz' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8xOiQpLaeRYoZOQvuhRPa6JMo1-2TQ0a2F0kK8Yryw9CkRWNCdpvHFptF76lLJTRw8GPrQwXI2hUtUOhMNZ8-vvEMSMXWB5RXqhzOClVAnzyU1uPzq_Mpzcth_hsWpt-8cDqJr7Kau8/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/AVvXsEhk-hqRYEonzlonkIj2jR0n77L0hsiuBQUH5gl7Vqcow-_WMgYMNyA6qQIEAEC1PoHbuk1Z2g4xbKTETLVTt0WN18OzxYk9_PUCEa7ZvO6ZhgJZPbeUrtYLBwEmfGkS4Gw2Hkty5C2B8ko/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>

 5. Simpan dan lihat hasilnya