Cara Terbaik Memasang Tombol Back to Top dan Back To Down Pada Blog

Assalamualaikum Warahmatullah Wabarakatuh

Kali ini saya akan membahas mengenai cara membuat tombol "back to top" atau kembali ke atas dan "back to down" atau kembali ke bawah pada suatu blog, tombol ini sedikit berguna bagi pengunjung blog yang ingin kembali ke halaman atas/bawah tanpa capek-capek lagi memutar scroll mouse. cara ini sangatlah efektif saat membuka artikel yang agak panjang.

Ok, langsung saja ya,,berikut adalah cara lengkapnya...
  • Login terlebih dahulu di Blogger,,Selanjutnya adalah masuk ke "Template" > "Edit HTML"
Cara Terbaik Memasang Tombol Back to Top dan Back To Down Pada Blog
  • Kemudian masukkan script/kode berikut tepat diatas code </body>
    <!-- Keatas - Kebawah --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:15px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/top.png'/></a> <a href='#gotodown' style='display:scroll;position:fixed;top:5px;right:15px;' title='Back to Down'><img onclick='MGJS.goDown();return false;' src='https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/down.png'/></a> <a name='gotodown'/>
  • Sehingga tampilannya seperti ini
Cara Terbaik Memasang Tombol Back to Top dan Back To Down Pada Blog
  • Selanjutnya pilih "Simpan Template"..sekarang silahkan cek blog saudara, kurang lebih seperti ini tampilannya..buatlah gambar/icon yang mirip dengan warna template sehingga kelihatan menyatudan lebih rapih.
Cara Terbaik Memasang Tombol Back to Top dan Back To Down Pada Blog

Dari gambar diatas, jika icon arah kebawah diklik/ditekan maka page akan menuju ke bagian bawah sekali, begitupun sebaliknya, jika icon arah keatas diklik/ditekan maka page akan menuju ke bagian paling atas.

Berikut adalah penjelasan script/code diatas:

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:15px;' title='Back to Top'> adalah code untuk Style, Posisi, dan judul/tag dari tombol/icon back to top.  

src='https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/top.png'/> adalah code untuk alamat/sumber dari icon/gambar untuk back to top. anda bisa buat sendiri sesuai keinginan kemudian upload,silahkan ganti alamat diatas dengan alamat gambar yang telah anda upload.

<a href='#gotodown' style='display:scroll;position:fixed;top:5px;right:15px;' title='Back to Down'> adalah codeuntuk Style, Posisi, dan judul/tag dari tombol/icon back to down.

src='https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/down.png'/> adalah code untuk alamat/sumber dari icon/gambar untuk back to down. anda bisa buat sendiri sesuai keinginan kemudian upload,silahkan ganti alamat diatas dengan alamat gambar yang telah anda upload.

Itulah cara memasang tombol back to top dan back to down atau kembali ke atas dan kebawah pada suatu blog, semoga berguna bagi teman-teman sekalian, jika ada yang kurang jelas....silahkan bertanya.

Salam

Artikel Terkait

No comments:

Post a Comment