Memasang tombol back to top diblog itu kebanyakan tutorialnya menggunakan jQuery atau Javascript. Akibat penggunaannya adalah loading blog akan menjadi lambat. Dan pengaruh lain dari pemakainan jQuery ini ialah akan terjadi "tabrakan" antara javascript jika lupa menghpus salah satu jQuery.
Kali ini
ABILLOG akan share
cara membuat tombol "Back To Top" yang asli dan murni css+html dan tanpa menggunakan javascript. Kode yang akan di share ini akan lebih
Seo Friendly dan boleh dibilang ga ada pengaruh apapun terhadap kecepatan blog. Yang artinya adalah loading blog sobat tetap cepat dan tidak memperlambat loading blog sobat akibat menggunakan kode "Back To Top" ini.
 |
| Tombol Back To Top |
Kegunaan menggunakan
tombol "Back To Top" ini adalah mempermudah pengguna/pembaca blog untuk kembali ke atas lagi dan harus perlu di scroll. Cara ini adalah salah satu cara untuk membuat blog kita agar lebih
seo friendly lagi dan membuat pngunjung nyaman ketika berkunjung ke blog kita.
Langsung saja kita simak cara pemasangan kode script nya:
1. masuk blogger, lalu pilih blog sobat.
2. klik menu tata letak/layout.
3. klik add gadget, lalu cari dan pilih html/javascript.
4. Copy kode dibawah ini dan letakkan di dalam kolom html/javascript tadi.
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1oM5kA_v3dhVQhv1X6NTFB07lzaDd79t1-GBqso3QiWllgD4NGFLVFeR_0uu4mHpEck-I07YjTg6_Y67cEHkJpu6z4Ko7bYKUWANhmKrgtHqt_7FpcOovspN5JhYxZ1ABCSL9jDh4QQ/s1600/back+to+top.png "/></a>
Ada satu kode lagi yang sama bagusnya dan seo friendly juga dan pastinya tanpa jQuery. Ini script dari CB Blogger. Untuk cara pemasangannya sih gak ribet-ribat amat, dan hasilnya juga lebih wuss karena ga pake url image.
Langsung saja:
1. Masuk ke blog sobat
2. klik menu template, lalu klik edit html
3. Copy paste kode dibawah ini tepat di atas kode </body>, kode </body> ini terletak di bagian paling bawah html blog.
<span class='back-to-top'><a href='#'> ↑ </a></span>
<span class='back-to-top-a'><a href='
http://abillog.blogspot.com/'>ABILLOG</a></span>
<style>
.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}
.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}
</style>
Penting! Ganti
http://abillog.blogspot.com/ dengan url blog sobat.
5. Tinggal Simpan/Save template. Selesai!
Dari 2 kode diatas, blog ini mamakai kode yang kedua lebih cepat dan seo friendly. Itulah tadi 2 kode script untuk membuat tombol "Back To Top" atau kembali keatas yang fast loading dan seo friendly. dan yang lebih penting lagi, murni css+html tanpa javascript. Selamat mencoba.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Memasang Tombol Back To Top di Blog"
Posting Komentar