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>.
Note : Yang berwarna merah merupakan posisi dari tombol-tombol tersebut. Silahkan ganti jika tidak sesuai.#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;
}
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/AVvXsEjIKCR3jMfeYL8EkiT5MZ_T0NmLUYI9wFRWzoFdu2QwQCc4wwM2VGcZTC6wqKAAsL3Go31nEYKRrXQlWTO2eLDPiHo8RWYLUE9f_Aw4tOHQ9eH162a9tDlac_Nb3Up9IZstoea4JHuiGcc/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpk6Y9o7MbehRryiovhoDfColCnXakpDd3fmuuTaj2Yo6QMMsA8K75yNhAJjaqTPgTcH6gSpfWhB7gz9piBmGQqjpYuI6XTjiBE4YKdhI-pfOIYMmQqYr3wSzULR6jegAeFsooxnGBEk/s320/pre-icon1.png'/></a></td>
<td><a href='#izurch-bangiz' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBSQui3MVv-1E06RK6ZrboaawFCqHXylb9ah8Ll3tlT0RE0Nlxs6YIStTyKwImGqgGgPpUIsZFnzXG1Nsys3ImjaL84m8xT15WRhQpXBlk6lv3X7VqxuzIn7lRL6FMznNLaLzwR-w6bk/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/AVvXsEheqmHIO8Y1ARocPzvNtgQO_CwgQjccuhvJ247dWhJi1uv584-y72hCcEtbfKgRpivKArYEFxVf4Q3GF2F5AvO7hpw19eKR_6k7krerJoHScq77uf8rPF_GqP1L-4EQm8zsN_Rppvc8yZI/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
5. Simpan dan lihat hasilnya.
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Tombol Back to Top, Home, Bottom dan Refresh . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
