Sahabat. Salah satu parameter penting dalam membangun sebuah blog berkualitas adalah sebuah desain blog bertipe “user friendly”. Maksudnya adalah bagaimana cara kita membuat sebuah blog yang bisa memudahkan pembaca setia.
SALAH satu kemudahan pembaca dalam menelusuri blog kita dalam hal desain adalah adanya tombol back to top. Tombol ini akan berfungsi sebagai scroll yang akan membantu memindahakan scroll dari bawah ke atas halaman awal blog.
Beberapa tips tutorial dari rekan-rekan blog lain mungkin sudah banyak yang memberikan cara mudah guna memasang tombol back to top ini. Namun, kebanyakan cara yang diberikan masih menggunakan kode JavaScript (jQuery). Dengan menerapkan kode tersebut, sedikit banyak bisa mengurangi kecepatan loading blog sobat. Selain daripada itu, proses pemasangannya juga agak riber.
Berbeda dengan tips trik SEO desain blog kali ini, kita akan belajar cara mudah memasang back to top button pada blog tanpa menggunakan jQuery atau JavaScript. Selain lebih mudah, juga tidak mempengaruhi kecepatan loading blog. So, mari kita simak lebih lanjut tips kali ini!
CARA MEMASANG BACK TO TOP BUTTON TANPA jQUERY DENGAN WIDGET
Cara yang pertama ini sangat mudah sekali Sob. Biasanya dengan menggunakan edit html pada template, kali ini cuma perlu menambah widget baru dan memasukkan kode di dalamnya. Nih cara lengkapnya:
1. Berdo’a dulu Guys
2. Masuk akun blogger
3. Pilih tata letak (lay out) > add gadget > Javascript/HTML
4. Copas kode di bawah ini:
1. Berdo’a dulu Guys
2. Masuk akun blogger
3. Pilih template > edit html
4. Cari kode </body>
5. Copas kode di bawah ini tepat di atas kode </body> kemudian Save template
<span class=’back-to-top-a’><a href=’http://forumblogindo.blogspot.com/‘>SL Blogger</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>
