Memasang popup tombol kembali ke atas kelihatan begitu rumit, tapi setelah dipelajari gampang, kemudian bagaimana caranya ?
</body> (
gunakan F3 untuk mempercepat pencarian )
bila sobat sudah menemukan </body> kemudian sisipkan kode dibawah ini tepat di atas kode</body>
bila sobat sudah menemukan </body> kemudian sisipkan kode dibawah ini tepat di atas kode</body>
<!-- Bact to top By urangcalung.blogspot.com -->
<a href='#'
style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to
Top'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIz77vS-fUr41H-rIjZ05FSdV2JtJNrqgIRkiF7JYkQUlElxBeyZxwoYdxTZnt74Nv5fOlsrWp0yxEUKaTnBA2dOiRXNemVnA1bDmwegd_GJwE4LjIYO3aPh2rC5Gj0hb8iFccdMo8AARj/s1600/top-up-baner.gif
'/></a>
<!-- Bact to top By urangcalung.blogspot.com -->
Cara Kedua :
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:
Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:
1. Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:
Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:
1. Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.
#Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Enjoy
a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Enjoy
img{border:0}
#Enjoy
a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
2. Kemudian sisipkan kode berikut ini setelah atau dibawah kode <body>
<div
id='Enjoy'>
<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>
<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>
3. Lalu simpan
tamplate anda, dan lihat hasilnya…
Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol
apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:
=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.
Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).
Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol
apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:
=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.
Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).
Hasilnya dapat kita lihat gambar di bawah ini
0 Comments