get your own embeddable forum with Talki

14FEB2010

Auto Scrolling “Back To Top”

Web/Blog Accessories4 Comments

Jika pada postingan sebelumnya ‘Membuat Link Back to Top‘ sudah saya sharing cara membuatnya, nah sekarang saya akan sharing cara membuat link back to top yang kurang lebih sama dengan postingan saya sebelumnya. Yang membedakan hanyalah pada postingan ini hanya sedikit menambahkan ‘auto scroller effect’ dan ‘Rollover Image’ pada linknya. Seperti apa nanti jadinya, coba scroll halaman ini sampai halaman paling bawah kemudian klik pada link pada pojok kanan bawah halaman. Kurang lebih seperti itu, jika mouse diarahkan pada link dapat anda lihat effect rollover image, jika diklik otomatis akan mengarahkan anda pada halaman paling atas tentunya dengan efek scrolling yang menawan.

Bagaimana tahap pembuatannya, ikuti langkah-langkahnya berikut ini;

Pertama, Sign in ke akun blogger anda. Klik pada tab ‘Layout’ (tata letak) kemudian navigasikan pada link ‘Edit HTML’. Cari kode "]]></b:skin>", kemudian tambahkan tag id ini di atas kode tersebut:

1

#atas {

2	bottom:5px;

3	right:5px;

4	position:fixed;

5	width: 50px;

6	height: 50px;

7

}

‘bottom’ dan ‘right’ adalah jarak dari batas tepi bawah dan kanan sebesar 5 pixel, silahkan sesuaikan dengan selera anda. ‘width’ dan ‘height’ masing-masing menentukan lebar dan tinggi dari object link, kebetulan gambar yang saya pakai mempunyai ukuran lebar dan tinggi 50 pixel. Sesuaikan dengan gambar anda. ‘Position:fixed’ maksudnya objek dari link tidak akan berubah posisinya jika halaman di geser ke bawah maupun ke atas, ataupun jika halaman browser dirubah-rubah ukurannya.

Kemudian buatlah gambar untuk effect rollover image. Harap dicatat untuk membuat rollover image harus ada dua gambar, gambar yang pertama adalah default sedangkan yang kedua untuk efek rollover ketika mouse diarahkan pada link sehingga seolah-olah gambarnya berubah. Pakai software olah gambar yang biasa anda pakai, jika contoh tag id di atas ukuran gambar ditentukan ’50px x 50px’ maka untuk menggabungkan dua gambar menjadi satu buatlah ukuran dengan lebar 50px dan tinggi 100 px. ’50px x 50px’ bagian atas untuk gambar default sisanya untuk efek gambar rollover. Contoh gambarnya seperti di bawah ini:

Untuk mengaktifkan efek rollover maka anda perlu menambahkan tag id tambahan untuk efek link gambarnya (tuliskan kode ini di bawah kode tag id paling akhir dari ‘#atas’ dibawah kode" } " ). Gambar yang saya pakai mempunyai alamat url ‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUeRMXh9DBQyz9-W5WI5fQD1JiMjOVvabl6VSUmKSoLs38iCLsuLqgMtGWtJXp26Y3NXy7nb1PgQdHpbVKzbgSZK78O1CV1zJPPioTPm-8v9WDr8W04kjWGjoeR1Epk4-lkNg0nw5_BU/s320/top.gif’. Tuliskan kode CSSnya seperti di bawah ini:

01	#atas a:link, #atas a:visited {

02	background:url(http://2.bp.blogspot.com/_S3jZICdfXuI/SoJLIqnjNkI/AAAAAAAAAaE/rx5IwaMWm7s/s320/top.gif)no-repeat left top;