Cara Membuat Tombol Back To Top ( Kembali keatas)
Pada malam hari ini saya akan share tutorial blog, yaitu cara membuat tombol back to top | kembali keatas pada blog, sebelumnya sobat tau apa itu back to top ? atau kembali keatas ? widget ini adalah widget yang berfungsi untuk mempermudah pengunjung blog untuk kembali kebagian atas dari blog kita tampa harus mengscroll ke atas apalagi kalau postingan blog kita panjang benar, dan pengunjung ingin kembali keatas dengan cepat, dan inilah peran dari tombol berikut. cara memasang tombol ini juga tidak susah untuk itu dari pada sobat membaca tulisan saya yang kurang bermutu langsung saja ke artikel mengenai cara membuat tombol back to top | kembali keatas pada blog
Ada Dua Cara:
Yang Pertama Cara sederhana:
pertama sobat yang pasti login ke blogger
kemudian masuk ke bagian template blog sobat
setelah itu cari kode
bila sobat sudah menemukan </body> kemudian sisipkan kode dibawah ini tepat di atas kode </body>
Untuk kode gambarnya Bisa diganti sesuai keinginan atau bisa di lihat disini
Save Tamplate dan selesai
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.
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).
Semoga Berhasil
Anda sedang membaca Artikel tentang Cara Membuat Tombol Back To Top ( Kembali keatas), jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
7 comments:
thanks sob
di copy...
tq...
Terima kasih anyak gan.. :D
salam kenal nih dari anak Bandung
Bisa dicoba di blog yang satu ni, makasih sob tips nya
terimakasih buat informasinya , terimakasih banyak ya sangat bermanfaat
perlengkapan bayi murah
sungguh detail penjabaranya , terimakasih banyak gan
streaming film subtitle indonesia
terimakasih infonya sob , ijin coba dulu.. semoga berhasil :)
Post a Comment