Kamis, 12 Agustus 2010
2 Cara Membuat Tombol Back To Top Pada Blog
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>
untuk penjelasannya, kalian login dulu ke blogger kalian, Ikuti tahap-tahapnya berikut ini :
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
Tombol back to top diatas hanya tombol back to top biasa, jika kalian mau yang lebih komplit ( Kaya Jamu aja ) 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. Jangan lupa baca juga membuat tombol back top dengan Jquery
Untuk membuat Tombol back to top ini kalian hanya perlu menambahkan kode berikut Sebelum kode </body>
<!-- Bact to top By Azis lamayuda -->
<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>
untuk penjelasannya, kalian login dulu ke blogger kalian, Ikuti tahap-tahapnya berikut ini :
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 Azis lamayuda -->
<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
Tombol back to top diatas hanya tombol back to top biasa, jika kalian mau yang lebih komplit ( Kaya Jamu aja ) 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.
#Kaluhur{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Kaluhur a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Kaluhur img{border:0}
#Kaluhur a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
Sekarang kalian simpan kode berikut ini Setelah atau dibawah kode <body>
<div id='Kaluhur'>
<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. Jangan lupa baca juga membuat tombol back top dengan Jquery
No comments yet