Cara Membuat Tombol Back On Top & Bottom Classy

Malam semuanya! Kali ini saya akan menjelaskan satu tips yang sangat mudah dan penting, yaitu cara membuat tombol Back to Top.
Kenapa sangat mudah? Karena anda akan saya kasih tau tips nya.. :O
Kenapa Penting? Karena bisa mempercepat pengunjung untuk kembali ke bagian paling atas halaman blog kita tanpa harus "scrolling". Dengan begitu mereka bisa dengan mudah mencari navigasi lain blog untuk berlama-lama disana. Hal ini merupakan salah satu cara membuat pengunjung merasa betah dan nyaman di blog. kalo tertarik dengan jQuery.. silahkan baca artikel cara membuat Back On Top Dengan JQuery Mau tau caranya?

Berikut Cara Membuat Tombol Back to Top:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Paste kode berikut sebelum kode ]]></b:skin> :

.gototop {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9IOGkd4EyRgF-5jW0V_DpxxrWnr2_71sN5jn-ik9DarcHZwsd3O0LTAMHdRcI85Ax4TPYuZGUl4vdehTyNop6ldGeWu65c6s2xZ8OXz3lphD-nV5WC5CJF0xSGUJStlCnWzVKXCYqZbE/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/AVvXsEjQFfTwDZWq63FZeYwgXNhQDi7jwc0qJN7gJRYz9d-p2MKLF5_PA3KrQ-h67vu7gkRyA-QUocxVliD7ngfnZXj6u3LwOm1oBbrtZq0IyPhzIcJUm8LuHieqeZu8WcYkmzW0TWAT89cckQM/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
}

4. Selanjutnya, cari kode </body>. Paste kode berikut di atasnya:

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>

5. Terakhir, klik Save Template untuk menyimpan perubahan.

Selamat mencoba...

Cara Membuat Tombol Back On Top & Bottom Classy 9 out of 10 based on 10 ratings. 9 user reviews.