Memasang Tombol Back To Top

Posting kali ini saya khususkan bagi sobat yang belum ada fasilitas back to top pada halaman web atau blog yang kita gunakan.

Agar pembaca lebih mudah dan cepat kembali ke halaman paling atas pada web atau blog kita, mungkin lebih baik kalau kita sediakan sebuah tombol (button) "Back To Top"

Tombol ini bisa berupa tulisan "Kembali ke Atas" (Back to Top) atau image berbentuk panah (arrow) tetapi jika tombol panah ini disentuh atau di klik dengan mouse, tulisan "Back To Top" secara otomatis akan muncul dibawah tombol tersebut.

Penempatan tombol ini tentunya pada halaman paling bawah di web atau blog kita, bisa diletakkan bawah-kanan atau bawah-tengah.

Untuk gambar panah, anda dapat kunjungi situs yang menyediakan clipart yang ada di internet dengan mesin pencari, tinggal pilih mana yang anda suka.

Salah satunya anda bisa kunjungi situs penyedia ratusan clipart dan free alias gratis yang alamatnya ada di : http://www.freeclipartnow.com

Contoh-contoh image untuk tombol back to top :

Nah setelah anda pilih gambar panah yang anda suka, download dan simpan ditempat image hosting, dimana biasanya anda menyimpan semua file image milik anda, misalnya saja di photobucket.com, ziddu.com, picasaweb.google.com dan banyak lagi lainnya yang free alias gratis !

Jika image sudah dipilih dan disimpan, kali ini saya akan sharing bagaimana cara memasang tombol back to top yang berupa tombol image dan jika di klik, tulisan "Back To Top" akan muncul dibawah tombol panah tersebut (penempatannya ada di bawah-kanan).

Caranya cukup mudah, ikuti langkah-langkahnya...

Seperti biasa, login di blogspot (blogger.com), pilih Tata Letak, pilih Edit HTML , cari kode ini : </body>

Kemudian sroll mouse anda kebawah lagi sampai menemukan kode : <div id='credit'>

Copy dan paste kode dibawah ini dan letakkan tepat diatas kode </div> </body> </html>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://Your_Image_Hosting/arrowup.jpg'/></a>

Ganti :

Your_Image_Hosting , dengan alamat Url image hosting anda.

right (bawah-kanan) ; left (bawah-kiri) ; center (bawah-tengah)

Klik Simpan.

Sekarang coba lihat halaman web/blog anda.

Happy blogging ....!

Berikan komentarmu, setelah mencobanya ......

.

.