Cara Memasang Tombol "Back to Top" SEO Friendly di Blog

Baca Juga

BANYAK tutorial cara membuat, menampilkan, atau memasang tombol "back to top" (kembali ke atas). Namun, kebanyakan tidak seo friendly. Masalahnya, ikon gambar panah ke atasnya biasanya tidak dilengkapi "alternatif text" dan "title text".

Maka, jika di blog Anda ada tombol "Back to Top" (BTP), periksalah kodenya. Jika belum ada deskripsi gambarnya, maka... ya kasih deskripsi dong, biar SEO Friendly!

Selain itu, kebanyakan menggunakan JavaScript/Jquery sehingga memberatkan loading blog, bahkan kadang ada konflik dengan JavaScript yang lain sehingga mengganggu tampilan. Maka... gunakan Tombol Back to Top SEO Friendly!

FUNGSI BACKT TO TOP
Tombol "Back to Top" menjadi salah satu trending desain website/blog agar User Friendly. Hal ini untuk memudahkan pengguna kembali ke bagian atas, setelah mereka scroll ke bawah karena membaca tulisan atau mencari informasi.

Misalnya, coba sek situs Yahoo Indonesia. Saat Anda scroll ke bawah, di bagian kanan monitor Anda akan muncul tombol "Back to Top". Tinggal klik, maka halaman akan kembali ke atas, otomatis.

Blog DEMO template New Johny Wuss ini juga baru saja dipasang tombol "Back to Top". Lihat sebelah kanan layar monitor. Ada tanda panah dengan latar merah.

Cara Memasang Tombol "Back to Top" SEO Friendly di Blog

Berikut ini cara mudah memasang tombol Back to Top SEO Friendly sebagaimana terpasang di blog ini:

1. Login ke akun Blogger Anda.
2. Pilih blog yang akan dipasangi Back to Top.
3. Klik "Template" > "Edit HTML"
4. Copas kode berikut ini tepat di atas kode </body>. Kode </body> ada di bagian bawah template Anda!

<span class='back-to-top'><a href='#'> &#8593; </a></span>
<span class='back-to-top-a'><a href='http://contohblognih.blogspot.com/'>CB 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>

5. Save Template!

Kini Tombol "Back to Top" SEO Friendly sudah muncul atau terpasang di blog Anda! Good Luck!