Membuat Perintah Ke Atas - Ke Bawah Halaman Blog Dengan JQuery

Masih ingat dengan artikel Membuat Floating Image Untuk Perintah Ke Atas - Ke bawah Halaman Blog? Nah, kali inipun bahasannya masih seputar perintah itu, bahkan CSS yang digunakanpun hampir sama. Hanya saja terdapat penambahan script dan framework javascript dari jQuery sehingga ketika link perintah itu diklik maka pergerakan ke atas atau ke bawahnya akan terlihat atraktif dan menarik. Gak percaya? Coba saja kamu klik gambar panah ke atas - ke bawah yang terletak di pojok kanan bawah.

Gimana, tertarik? Lalu bagaimana jika sudah menggunakan framework mootools, apa masih bisa berfungsi? Tenang saja sob, script-nya sudah dibuat bersahabat dengan mootools, soalnya title slider blog saya juga pake dukungan mootools, hehehe...

Langkah-langkah yang harus kamu ambil untuk membuat perintah ke atas dan ke bawah ini adalah:

Dari halaman Dasbor Blogger kamu, pilih Rancangan - Edit HTML.

Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:

#floating-atas-bawah {
position:fixed; _position:absolute; vertical-align:bottom;

 width:30px; bottom:5px; right:5px; clip:inherit; z-index:+1000;
}

Atur ukuran yang berwarna merah sesuai keinginan.

Setelah itu kopikan script berikut dan letakkan di bawah ]]></b:skin>

<script src='http://enes-sc.googlecode.com/files/jquery151.js'

type='text/javascript'/>
<script src='http://enes-sc.googlecode.com/files/scrolltopdown.js'

 type='text/javascript'/>

Bagi yang sudah menggunakan mootools, letakkan script tersebut di bawah script mootools.

Selanjutnya kopi kode HTML berikut dan letakkan di bawah </head>:
```
<div id='floating-atas-bawah'>
<a href='#header' title='Ke Atas'><img border="0" alt='top'
```
```
 src='http://sites.google.com/site/ruangsc/imgsb/scrolltop.png'/></a>
<a href='#footer' title='Ke Bawah'><img border="0" alt='down'
```
```
 src='http://sites.google.com/site/ruangsc/imgsb/scrolldown.png'/></a>
</div>
```
Catatan:

Untuk perintah ke atas harus sesuai dengan CSS untuk "kode atas" template kamu, apakah menggunakan top, head, header, atau header-wrapper. Demikian juga perintah ke bawah harus sesuai dengan "kode bawah" pada template kamu, apakah footer atau bottom.

Jika kamu menginginkan gambar panah yang lain, ubah alamat source image (src) dengan alamat gambar-gambar yang kamu suka. Tinggal klik gambarnya, lalu kopikan URL-nya.
Simpanlah hasil kerjaan kamu dan ucapkan Alhamdulillah...