Friday, December 30, 2011

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

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 {
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://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...???




No comments:

Post a Comment