Tombol Back to Top pada Blog

Apakabar Sahabat blog Aapaaja :) kali ini kita akan membuat suatu tombol tambahan pada halaman blog kita. Nah apa itu tombol back to top dan bagaimana cara kerjanya. tombol back to top adalah tombol yang biasa di gunakan oleh para bloger untuk memberikan kemudahan bagi pembacanya. mengapa begitu? karna setiap kita membaca sampai kebawah halaman artikel seringkali kita akan kembali ke halaman teratas pada blog tersebut. maka ini dia fungsi nya, yaitu membawa para pembaca kembali ke atas halaman hanya dengan menekan tombol back to top ini.

Sekian penjelasan untuk tombol Back to Top mari kita langsung saja prakteknya. Yuk mari...

Tahap pertama tentu saja kita login ke account blog kita. pilih tab Rancangan > berikutnya Edit HTML

Teman-teman lakukan pencariaan untuk kode berikut ]]></b:skin> untuk mempercepat pencarian kita gunakan fasilitas find umumnya dapa mengguankan tombol ctrl + f masukkan kode tersebut. Setelah ditemukan masukkan script ini sebelum kode tersebut :

.gototop {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK49_qUDJKbpnvM7NJOvcMC-wfGLWbjQ-Lfwb1Me4phbse0yRyh1mQ2BuUazZjmQpuYlrvVyqLSfVeT78gz9HiKGA5koX1K9aADl6FB4ezSJyRAxUdJMJ738QP5UxKWLJ-uE-kHEkpqwY/s400/arrowtopdt6.gif)no-repeat;

display:block;

_display:none;

position:fixed;

z-index:9999;

text-indent:-9999px;

width:17px;

height:17px;

overflow:hidden;

outline:none;

right:8px;

bottom:35px

}

.gotobottom {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNawjiFNmPtkVfFQtLrOLRe9mjLvhl_MVTtSmTy6gNTj92daF1k8kW2O1eiIdyBHL8-VaWUv3Qor-lZpWwTg5Yl8AX1eQvjfBJ4z7pZm5JM0HraYNN9hqo18hZKrZj7N1VbbY5IUe49_c/s400/arrowdownqe1.gif)no-repeat;

width:17px;

height:17px;

display:block;

_display:none;

position:fixed;

z-index:9999;

text-indent:-9999px;

overflow:hidden;

outline:none;

right:8px;

bottom:15px

}

Teman-teman dapat mengguankan gambar sesuai dengan selera masing2. caranya upload gambarnya di file hosting ambil alamat letaknya, lalu ganti alamat pada kode di atas yang berwarna biru dengan alamat dimana Teman-teman upload file tadi. diatas ada dua alamat yang pertama untuk tombol top / atas dan yang ke dua untuk tombol botton / bawah.

Selanjutnya kita cari kode </body> letakkan kode berikut diatasnya :

<a class='gototop' href='javascript:scroll(0,0)' title='Go to Top'>Top</a>
<a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>

Terakhir Simpan Template. OK Teman-teman sekian dari Saya Blog Aapaaja semoga pembahasan kali ini dapat menambah ilmu kita dan dapat di ambil manfaatnya.

Artikel Terkait