Cara Memasang Tombol Back To Top Pada Blog

Hallow sob, ketemu lagi dech kita di blog kesayangan ane ini. Pada kesempatan kali ini kaka-jr akan sedikit share Cara Memasang Tombol Back To Top Pada Blog yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload.

Nah, buat sobat bloggers yang sudah tidak sabar langsung saja ke tutorial Cara Memasang Tombol Back To Top Pada Blog berikut ini.

Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun Pada Blog

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi sebagian besar bloggers sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:

(Sebelum memasuki penjelasan, download terlebih dahulu template sobat, sebagai asuransi tamplate kalian...hehe...)

Cara Pertama:

Untuk cara pertama ini sangat simple, karena tampilannya sederhana, sobat hanya perlu menambahkan kode berikut sebelum kode </body>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPJNPWx7tqYZR7FnZmbzELCysRVpw_x8Lqx7QPM-JEoiF_vQ8_5wQm853AjJhvd-YHdarQ_2gPiKi0s8b0RhKV_ZbXXtJ18gOnlmAp_xep5VrDIeTNQ7aeBj_B6_axQ6k9BYwpqGYLH0i/s1600/Untitled-2.png'/></a>

Untuk penjelasannya, login dulu ke blogger sobat lalu Ikuti tahap-tahap berikut ini:

1. Pilih Template

2. EDIT HTML ( Centang Expand Template Widget )

3. Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )

4. Simpan kode berikut sebelum atau di atas kode </body>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPJNPWx7tqYZR7FnZmbzELCysRVpw_x8Lqx7QPM-JEoiF_vQ8_5wQm853AjJhvd-YHdarQ_2gPiKi0s8b0RhKV_ZbXXtJ18gOnlmAp_xep5VrDIeTNQ7aeBj_B6_axQ6k9BYwpqGYLH0i/s1600/Untitled-2.png'/></a>

5. Lalu simpan tamplate, lihat hasilnya…

Keterangan:

Kode warna kuning adalah posisi tombol berada
Kode warna merah adalah URL gambar tombol (silahkan ganti dengan URL gambar kalian bila ingin menyesuaikan gambarnya dengan selera kalian)

Cara Kedua:

Tombol back to top pada cara pertama hanya tombol back to top biasa, jika sobat ingin yang lebih komplit, bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang sobat 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>

3. Lalu simpan tamplate, dan lihat hasilnya…

Keterangan:

=> Warna biru 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 coaba kalian ganti dengan #footer atau #copyright sesuaikan dengan HTML template kalian.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna ungu dengan keterangan sebagai berikut. left (untuk sebelah kiri) right (untuk sebelah kanan blog kalian).

Nah, selesai sudah. Selamat mencoba dan berkreasi ya sob.
Sampai jumpa lagi di season berikutnya..

Jangan lupa comment & like, yaaa...(^^,)v