Cara Buat Back to Top / Scroll to Top, Down, Home pada Blog

---

Ini yang mempermudah pembaca dalam melihat semua isi dari Blog Sobat semuanya, dengan Cara Buat Back to Top / Scroll to Top, Down, Home pada Blog. Langsung aja ke TKP untuk mempersingkat waktu dech...

Berikut ini langkah untuk memasangnya :

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);
    }

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