Sesuai dengan judulnya membuat tombol atau button Back To Top, adalah tombol yang digunakan Untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah.
Untuk membuat Tombol back to top ini anda hanya perlu menambahkan kode berikut sebelum kode </body>
Untuk membuat Tombol back to top ini anda hanya perlu menambahkan kode berikut sebelum kode </body>
<!-- Back to top -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i1222.photobucket.com/albums/dd486/bertchoy/gototop.png '/></a>
Baiklah, berikut langkah-langkahnya :
1. Pilih Rancangan
2. EDIT HTML ( Centang Expand Template Widget )
3. Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4. Simpan kode berikut diatas kode </body>
<!-- Back to top up ala tutorial -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i1222.photobucket.com/albums/dd486/bertchoy/gototop.png'/></a>
Catatan :
- Kode warna merah adalah posisi tombol berada.
- Kode warna biru adalah URL gambar Tombol ( silahkan ganti dengan URL gambar kalian )
5. Klik tombol SIMPAN TEMPLATE
Tombol back to top diatas hanya tombol back to top biasa, kalo anda mau yang lebih lengkap, silakan anda pake cara kedua dibawah ini :
Langkah-langkahnya sama dengan yang diatas, hanya saja sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, Berikut penjelasannya :
Cari kode ]]></b:skin> lalu simpan CSS berikut diatasnya.
Langkah-langkahnya sama dengan yang diatas, hanya saja sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, Berikut penjelasannya :
Cari kode ]]></b:skin> lalu simpan CSS berikut diatasnya.
#tutor-backtopup{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#tutor-backtopup a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#tutor-backtopup img{border:0}
#tutor-backtopup a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
Sekarang simpan kode berikut ini dibawah kode <body>
Catatan:<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i1222.photobucket.com/albums/dd486/bertchoy/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i1222.photobucket.com/albums/dd486/bertchoy/icon_author.gif'/></a>
<a href='#' title='Ke Atas Halaman'><img src=’http://i1222.photobucket.com/albums/dd486/bertchoy/topopg.png'/></a>
<a href='#footbar' title='Ke Bawah Halaman'>
<img src='http://i1222.photobucket.com/albums/dd486/bertchoy/down.png'/></a>
</div>
- Warna Biru adalah gambar untuk tombolnya
- Warna merah adalah posisi tombol
- untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.
Dan jangan lupa komentarnya untuk artikel ini jika ada yang mau menambahkan cara yang lainnya. Ditunggu ya...Thanks
Semoga bermanfaat.
HAPPY BLOGGING