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. 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> :
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. 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/AVvXsEjJ30RFoYBoxj-3HGrZZp1wW3qOnndlVB-5j4ZHu-KmnC2XLxpt8kIPe2VHELy81tNXXjBpislKl0xP-spakBLTFjdJuAGzMk8XyIHNGXlJ6viPwes80qOnlrOu8T5aVW46saKyuSW8w5Q/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/AVvXsEg5vGrjfS_aYCoL3N-3kk-FsZiffBMnkb_MFhHA7hldVOadiGe9JcfWLIAUeoB-FL1A_X3xhDRBlHVBt-5y4VFmiqFXcOD6R7fJxS1FMlHU5uGKWClAhiJFSTVEPShpxeM28b5K3Ga9Bfk/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
}
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ30RFoYBoxj-3HGrZZp1wW3qOnndlVB-5j4ZHu-KmnC2XLxpt8kIPe2VHELy81tNXXjBpislKl0xP-spakBLTFjdJuAGzMk8XyIHNGXlJ6viPwes80qOnlrOu8T5aVW46saKyuSW8w5Q/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/AVvXsEg5vGrjfS_aYCoL3N-3kk-FsZiffBMnkb_MFhHA7hldVOadiGe9JcfWLIAUeoB-FL1A_X3xhDRBlHVBt-5y4VFmiqFXcOD6R7fJxS1FMlHU5uGKWClAhiJFSTVEPShpxeM28b5K3Ga9Bfk/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>
<a class='gotobottom' href='#footer' title='Go to Bottom'>Bottom</a>
5. Terakhir, klik Save Template untuk menyimpan perubahan.
Selamat mencoba...
Jangan lupa kasih komentar yaa,.. :y