Cara Memasang Back To Top, Down dan Home Seri 2

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!