Cara Buat Back to Top / Scroll to Top, Down, Home pada Blog
Cara Buat Back to Top / Scroll to Top, Down, Home pada Blog
Untuk posisi disebelah kanan
1. Masuk ke Edit HTML.
2. Carilah kode </b:skin>
3. Letakkan kode berikut
di atas kode </b:skin> ini.
01 | #namaku { |
02 | position:fixed;_position:absolute;bottom:30px;right:30px; |
03 | clip:inherit; |
04 | _top:expression(document.documentElement.scrollTop+ |
05 | document.documentElement.clientHeight-this.clientHeight); _right:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); |
06 | } |
07 | #namaku a |
08 | { |
09 | -o-transition: all 2.5s ease-in-out; |
10 | -moz-transition: all 2.5s ease-in-out; |
11 | -webkit-transition: all 2.5s ease-in-out; |
12 | opacity: 0.5; |
13 | filter: alpha(opacity=50); |
14 | } |
15 | #namaku img |
16 | { |
17 | border:0; |
18 | } |
19 | #namaku a:hover |
20 | { |
21 | opacity: 1.0; |
22 | filter: alpha(opacity=100); |
23 | } |
Setelah tutor26 lakukan editing, ternyata bisa tampil disebelah kiri. Bahagia juga nech...
Langsung sedot aja Gan, untuk posisi disebelah kiri dibawah ini
#namaku {
position:fixed;_position:absolute;bottom:25px;left:20px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollleft+ document.documentElement.clientWidth - offsetWidth);
}
#namaku a
{
-o-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
opacity: 0.3;
filter: alpha(opacity=30);
}
#namaku img
{
border:0;
}
#namaku a:hover
{
opacity: 0.5;
filte: alpha(opacity=50);
}
position:fixed;_position:absolute;bottom:25px;left:20px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollleft+ document.documentElement.clientWidth - offsetWidth);
}
#namaku a
{
-o-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
opacity: 0.3;
filter: alpha(opacity=30);
}
#namaku img
{
border:0;
}
#namaku a:hover
{
opacity: 0.5;
filte: alpha(opacity=50);
}
KETERANGAN :
Yang bisa dirubah dan diutak-atik sendiri :
Atur jaraknya ikonnya pada kode
bottom:.....px; right:.....px;.-o-transition: all .....s ease-in-out;
-moz-transition: all .....s ease-in-out;
-webkit-transition: all .....s ease-in-out;
opacity: .....;
filter: alpha(opacity=.....);
4. Cari lagi kode </body>
5. Letakkan kode berikut
di atas kode </body> ini.
1 | <a name='down'></a> |
2 | <script type="text/javascript"> |
3 | if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); |
4 | </script> |
6. Masih di kode </body>
7. Letakkan kode berikut
di bawah kode </body> ini.
8. Pratinjaulah terlebih dahulu,
kemudian simpan template anda.
1 | <div id='namaku'> |
2 | <table border='0'> |
3 | <tr> |
4 | <td><a href='http://tutor26.blogspot.com' title=''><img src='http://i.imgur.com/jTVDo.gif'/></a></td> |
5 | <td><a href='#' title=''><img src='http://i.imgur.com/wjlcE.gif'/></a></td> |
6 | <td><a href='#down' title=''><img src='http://i.imgur.com/KtJSs.gif'/></a></td> |
7 | </tr> |
8 | </table> |
9 | </div> |
CATATAN :
Gantilah http://tutor26.blogspot.com
dengan URL alamat blog anda.
Bila perlu, ganti juga URL gambarnya
dengan URL gambar milik Anda sendiri.
Bagaimana...???
Tags :
Cara buat "Back to Top / Scroll to Top, Down, Home pada Blog, Cara Membuat Back to Top / Scroll to Top, Down, Home pada Blog
Cara buat "Back to Top / Scroll to Top, Down, Home pada Blog, Cara Membuat Back to Top / Scroll to Top, Down, Home pada Blog
