Fungsi Tombol Back To Top Button (Kembali ke Atas)
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
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:
<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/AVvXsEjWk_U8a4c4Q2q4KWrfSR9QQ1FW0kbNPn4Lfz33UfNfJJxwP_OuFW_cMNhZP-_teu6oDl2E6HXp-kLkTmKChE4ZDxNmiauJqOkN3L0Vmm3ILgv97oEEQQ-4d05mvzV95oDv_gyD1zlAjvU/s1600/back+to+top.png "/></a>
***. Note:
warna biru menunjukkan jenis/tipe/model gambar tombol back to top. Jika ingin melakukan modivikasi gambarnya, silakan sesuaikan dengan selera Sobat. Carai saja di koleksi desain tombol back to top pada blog.
5. Save
6. Baca hamdallah guys. Silakan refresh blog sobat dan lihat perbedaannya.
CARA MEMASANG BACK TO TOP BUTTON DENGAN EDIT TEMPLATE
Sobat tidak perlu khawatir dengan cara ini, karena akan Ane kasih tutorialnya secara gamblang dan mudah. Yang pasti tidak mengurangi kecepatan loading blog bisa lebih kenceng dan wuss karena tanpa kode URL gambar. Berikut tutorialnya:
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 href='#'> ↑ </a></span>
<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>
<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>
***. Note: Silakan ganti warna biru pada kode di atas dengan alamat URL blog Sobat.
Demikian tips SEO desain blog kali ini. Semoga bermanfaat. Aamiin.
Salam.
(http://forumblogindo.blogspot.com/).*
0 comments:
Post a Comment