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:
#atas {
bottom:5px;
right:5px;
position:fixed;
width: 50px;
height: 50px;
}'bottom' dan 'right' adalah jarak dari batas tepi bawah dan kanan sebesar 5 pixel, silahkan sesuaikan dengan kreatifitas 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/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif'. Tuliskan kode CSSnya seperti di bawah ini:#atas a:link, #atas a:visited {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif) no-repeat left top;
display: block;
width: 50px;
height: 50px;
}
#atas a:hover, #atas a:active {
background-position: left bottom;
border: none;
}Sudah hampir jadi, sekarang tinggal link ke file javascriptnya untuk efek auto scrolling. Tuliskan kode di bawah ini di bawah kode <head>:
<script src='http://www.domain.com/scroller.js' type='text/javascript'/>
Terakhir tinggal buat anchor linknya, ada dua cara yang dapat anda lakukan. Cara pertama klik pada tab 'Layout' (Tata Letak) klik pada 'Page element' (Elemen halaman). Klik pada 'Tambah gadget' (Harus pada gadget paling atas), kemudian klik pada pilihan 'HTML/Javascript', tuliskan kode di bawah ini pada kotak konten edit HTML/Javascript:
<a id="top" name="top"></a>
Cara yang kedua, pada tab menu 'Layout' (Tata Letak) klik pada 'Edit HTML', cari kode '<body>'. Kemudian tuliskan kodenya sama seperti kode di atas di bawah tag '<body>'.
Selanjutnya buat linknya, masih pada bagian 'Edit HTML', tambahkan kode ini di atas tag '</body>':
<div id='atas'> <a href='#top' title='Back to top'></a> </div>
Selesai, semoga bermanfaat...
:D
thanks infonya gan
BalasHapus[...] Baca Juga ‘Auto Scrolling Back To Top‘. [...]
BalasHapus