Sesuai dengan judulnya membuat tombol atau button Back To Top, Artinya 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 kalian hanya perlu menambahkan kode berikut Sebelum kode </body>
1. Pilih Rancangan
2. EDIT HTML ( Centang Expand Template Widget )
3. Cari Kode </body> ( Biasanya letaknya paling bawah ( Untuk lebih cepat mencari gunakan Ctrl+F )
4. Simpan kode berikut Sebelum atau diatas kode </body>
Keterangan :
== Kode warna merah adalah posisi tombol berada.
== Kode warna biru adalah URL gambar Tombol ( silahkan ganti dengan URL gambar kalian )
5. SIMPAN Template
Cara Membuat Tombol Back To Top
Cara 2
Tombol back to top diatas hanya tombol back to top biasa, jika kalian mau yang lebih komplit kalian bisa pake cara kedua dibawah ini :
Tahap - tahapnya sama dengan yang diatas, cuma sekarang kalian harus menambahkan kode CSS sebelum kode ]]></b:skin>, Berikut penjelasannya :
cari kode ]]></b:skin> lalu simpan CSS berikut sebelum atau diATASnya.
Sekarang kalian simpan kode berikut ini Setelah atau dibawah kode <body>
Keterangan :
== Warna Biru adalah gambar untuk tombolnya
== Warna merah adalah posisi tombol
== untuk kode #footbar kalian ganti dengan #footer atau #copyright sesuaikan dengan HTML template kalian.
SIMPAN template kalian dan jangan lupa komentarnya untuk artikel ini jika ada yang mau menambahkan cara yang lainnya. Ditunggu ya...
Semoga bermanfaat.
Untuk membuat Tombol back to top ini kalian hanya perlu menambahkan kode berikut Sebelum kode </body>
<!-- Bact to top By Love -->untuk penjelasannya, kalian login dulu ke blogger kalian, Ikuti tahap-tahapnya berikut ini :
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
1. Pilih Rancangan
2. EDIT HTML ( Centang Expand Template Widget )
3. Cari Kode </body> ( Biasanya letaknya paling bawah ( Untuk lebih cepat mencari gunakan Ctrl+F )
4. Simpan kode berikut Sebelum atau diatas kode </body>
<!-- Bact to top By By Love -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
Keterangan :
== Kode warna merah adalah posisi tombol berada.
== Kode warna biru adalah URL gambar Tombol ( silahkan ganti dengan URL gambar kalian )
5. SIMPAN Template
Cara Membuat Tombol Back To Top
Cara 2
Tombol back to top diatas hanya tombol back to top biasa, jika kalian mau yang lebih komplit kalian bisa pake cara kedua dibawah ini :
Tahap - tahapnya sama dengan yang diatas, cuma sekarang kalian harus menambahkan kode CSS sebelum kode ]]></b:skin>, Berikut penjelasannya :
cari kode ]]></b:skin> lalu simpan CSS berikut sebelum atau diATASnya.
#Love{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Love a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Love img{border:0}
#Love a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
Sekarang kalian simpan kode berikut ini Setelah atau dibawah kode <body>
<div id='Love'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
<a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
<a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
</div>
Keterangan :
== Warna Biru adalah gambar untuk tombolnya
== Warna merah adalah posisi tombol
== untuk kode #footbar kalian ganti dengan #footer atau #copyright sesuaikan dengan HTML template kalian.
SIMPAN template kalian dan jangan lupa komentarnya untuk artikel ini jika ada yang mau menambahkan cara yang lainnya. Ditunggu ya...
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar
Ada pendapat lain dari sobat, Silahkan berkomentar