0 Cara Memasang Back To Top, Down dan Home Seri 2

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

Untuk mencari tutorial cara membuat Back To Top,
Down dan Home tidaklah sesulit dulu. Sekarang
semakin banyak saja situs yang " berbagi "
tentang hal ini, termasuk blog inipun terus berbagi
selama hayat masih dikandung badan.

Back To Top, Down dan Home pada seri ini
dibumbui dengan efek hollover. Samar terlihat
bila tidak tersorot oleh cursor.

Berikut ini langkah untuk memasangnya :

1.   Masuk ke Edit HTML.

2.   Carilah kode </b:skin>

3.   Letakkan kode berikut
      di atas kode </b:skin> ini.

#namaku {
position:fixed;_position:absolute;bottom:30px;right:30px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _right:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); 
}
#namaku a
{
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;  
opacity: 0.5;
filter: alpha(opacity=50);
}
#namaku img
{
border:0;
}
#namaku a:hover
{
opacity: 1.0;
filter: alpha(opacity=100);
}

KETERANGAN :

Atur jaraknya ikonnya pada kode

bottom:......px; left:......px;

4.   Cari lagi kode </body>

5.   Letakkan kode berikut
     di atas kode </body> ini.

<a name='down'></a>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>

6.   Masih di kode </body>

7.   Letakkan kode berikut
      di bawah kode </body> ini.

8.   Pratinjaulah terlebih dahulu,
      kemudian simpan template anda.

<div id='namaku'>
<table border='0'>
<tr>
<td><a href='http://syamsudinnamaku.blogspot.com/' title=''><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/go_home.gif'/></a></td>
<td><a href='#' title=''><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/go_top.gif'/></a></td>
<td><a href='#down' title=''><img src='http://i1128.photobucket.com/albums/m486/syamsudin1/go_down.gif'/></a></td>
</tr>
</table>
</div>

KETERANGAN :

Gantilah http://syamsudinnamaku.blogspot.com
dengan URL alamat blog anda.

Bila perlu, ganti juga URL gambarnya
dengan URL gambar milik Anda sendiri.

Selamat mencoba dan tetap good luck!