Tutorial Online Tools+ Tips Trik SEO Blogger - Cara Membuat Scroll Back 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 {

02position:fixed;_position:absolute;bottom:30px;right:30px;

03clip:inherit;

04_top:expression(document.documentElement.scrollTop+

05document.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;  

12opacity: 0.5;

13filter: alpha(opacity=50);

14}

15#namaku img

16{

17border:0;

18}

19#namaku a:hover

20{

21opacity: 1.0;

22filter: 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">

3if (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://masphoo.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://masphoo.blogspot.com
dengan URL alamat blog anda.

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

Bagaimana...???