Jumat, 19 September 2014

Cara Memberikan Tombol Back to Top di BLOG

Tombol Back to Top, mungkin tidak asing lagi bagi kita para blogger yang tiap harinya selalu bermain-main di dunia blogging. Dari namanya saja "Back to Top" atau "Kembali ke Atas", ini merupakan salah satu fitur yang memanjakan kita sebagai pengunjung untuk kembali ke pagian atas halaman yang sedang kita buka tanpa melakukan scrolling menggunakan mouse atau yang lebih sulit pake tanda panat keatas di keyboard. Efek dari back to top ini sangat terasa sekali jika kita mampir di sebuah halaman yang isinya amat sangat panjang sehingga untuk kembali keatas membutuhkan waktu untuk scrolling.

Biasanya di kebanyakan blog yang sudah sayan kunjungi, peletakan tombol Back to Top ini ada di bagian kanan bawah, sehingga user tidak susah untuk mencari tombol ini.

Ah, jangan lama-lama bahasnya. Langsung aja yuk cara memberikan tombol Back to Top di blogger.

Pertama dan yang pasti harus login dulu ke blogger Anda.
Masuk ke template, dan edit HTML.
Silahkan cari code tag </body> (pake ctrl + F biar lebih cepat)
Lalu Masukkan script berikut tepat diatas </body>

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>

Silahkan ganti "Back to Top" sesuai dengan keinginan anda.
Tidak usah diganti juga tidak apa-apa, karena tulisan itu hanya akan tampil jika browser gagal untuk memuat gambar back to top.

terus "alamat url Back to Top" silahkan diganti dengan url gambar yang anda sukai. contoh "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIUYWfk3JBZV8v4mJjiRcEedOHlx-BNqnGIlR0ZUA4tMOY_-UfLOFvOdvTPxjYK6V7Fo1n9jBRj-6xiZ41Zl7pf8frUZJUDmsGb4Jou6uOVhwKK02gg1ooDViLl1W3YMdwiyNjhPgn7vA/s1600/bttp-14.png" diletakkan di url.

Atau bisa juga anda mencari gambar sendiri di Google yang sesuai dengan keinginan Anda.
Ini saya kasih contoh :

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIUYWfk3JBZV8v4mJjiRcEedOHlx-BNqnGIlR0ZUA4tMOY_-UfLOFvOdvTPxjYK6V7Fo1n9jBRj-6xiZ41Zl7pf8frUZJUDmsGb4Jou6uOVhwKK02gg1ooDViLl1W3YMdwiyNjhPgn7vA/s1600/bttp-14.png'/></a>

Kalau sudah, tinggal save template dan jreng-jreng....
Silahkan lihat hasilnya di blog Anda

Happy Blogging.

Artikel Terkait

Cara Memberikan Tombol Back to Top di BLOG
4/ 5
Oleh