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.
4. Cari lagi kode </body>
5. Letakkan kode berikut
di atas kode </body> ini.
6. Masih di kode </body>
7. Letakkan kode berikut
di bawah kode </body> ini.
8. Pratinjaulah terlebih dahulu,
kemudian simpan template anda.
Gantilah http://ebendt.blogspot.com
dengan URL alamat blog anda.
Bila perlu, ganti juga URL gambarnya
dengan URL gambar milik Anda sendiri.
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://ebendt.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://ebendt.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!
1 komentar:
thanks mas infonya,
lain kali kunbal ya!!
Posting Komentar