Latest News :

Home » » Membuat Tombol Home, BackToTop, BackToDown, Reload

Membuat Tombol Home, BackToTop, BackToDown, Reload

Sabtu, 10 November 2012 | 0 komentar

Saya akan menjelaskan cara membuat tombol Home, Back to top, Back to down, Refresh.
1. Tombol Home gunanya untuk Kembali ke HomePage.
2. Tombol Back To Top gunanya untuk kembali ke atas.
3. Tombol Back To Down gunanya untuk kembali ke bawah.
4. Tombol Refresh gunanya untuk membuk ulang halaman.
Caranya mudah banget, gini saya kasih tau caranya :
  • Kita menuju Tatak letak, atau sekarang di sebut Rancangan >> edit HTML.
  • Kalau sudah, cri kode ]]></b:skin>
  • Kalau sudah ketemu, copy code berkut dan paste di atas code tadi :
#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
  • Kalau sudah, copy code berikut :
<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5TMoHJIt7jn4xE5smyD1aKCHi5zJnn-dBsGxG_PJLawxf2OmDEU33-wYIoZNrS92I9ns-Z2Q7G5dL3DVq4FCDJHY1zmjFA05h2ebY9txXqHEq_l2KkvWZM9snceZIKecS0SS82TS_a4/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAcm7opQ58Wk9k8thbni7fR0Zg3NhwCQmiFdxDb0sjRLId2s-t9J30AGJ-JiuVx9PhnikTysGlfFeqqiZsnqCxDh7hy9Dp15xM1JR2PVRPp2ncMom2bxbP_7GJHKDcsijAuMPublYb1M/s320/pre-icon1.png'/></a></td>
<td><a href='#bottom' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc3LR1pNRzCE8UNAgA9aYMxRDzKDMtZTOMNKxLSanVidmGaBz4k5QlOkeZUdQk2ab0KFkm5E8hyphenhyphennMdx5OKWfE-AMyQfDUxWnJ4X4yvPJI7DSNYNKa8QZacYnJ30RWUqHqBTMFSrQt92s/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/AVvXsEiHacG6kmLq9di_LpWiNYWUbHaTA457K4RhaBO2ISFdK_lam4qkdzBEj0qoRmAy8tJEo4sbtlgx2xMQPq7O4FZrwW8tnlf6IMaTnOn6D3y3DuMBzuvRQims1m97ZjxI1_8PqhKlx-HiBaQ/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
  • Kalau sudah di copy, paste code di atas tepat dibawah code <body>
  • Lalu Simpan, dan lihat hasilnya.
Selamat mencoba, dan semoga berhasil :D
Share this article :
 
Support : Creating Website
Copyright © 2011. Nicko Part III - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger