CARA DESAIN BLOG Memasang tombol kembali ke atas atau memasang tombol back to top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
T
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7do1cQ3S2pYoK3LqMqm4nwlaymzO5yKnILnCy4s4cnku-unMl6buzhwMh09TPEKi3-p841WxvE_kH_JxDib0YHVu7qVskQLJk_YAg536YBQ0v2G8gapwLGpgH4D55FrTVyEtGA_mV8ZGh/s148/ke%2520atas.png'/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7do1cQ3S2pYoK3LqMqm4nwlaymzO5yKnILnCy4s4cnku-unMl6buzhwMh09TPEKi3-p841WxvE_kH_JxDib0YHVu7qVskQLJk_YAg536YBQ0v2G8gapwLGpgH4D55FrTVyEtGA_mV8ZGh/s148/ke%2520atas.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

  • Kode warna kuning adalah posisi tombol berada
  • Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


No comments:

Post a Comment

TINGGALKAN PESAN DAN KESAN SETELAH BERKUNJUNG