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...???




0 komentar:

Post a Comment

Blog Auto Approve Comments with Chapta (Blog komentar tampil setelah mengisi kode / verifikasi gambar terlebih dahulu).

Mohon menuliskan komentar Mas Mbro Bos dengan bahasa yang baik, tidak mengandung Sara, Pornografi, dan Provokasi Pihak lain.

Terima kasih atas kesediaan Mas Mbro Bos dimanapun berada (",)

Salam,

Follow by Email