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

Posted by New Johny Wuss

Tombol "Back to Top" SEO Friendly di Blog
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.

"Back to Top"

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.

"Back to Top"

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!

» Thanks for reading: Cara Memasang Tombol "Back to Top" SEO Friendly di Blog
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: February 03, 2015

3 comments:

  1. Komentar pertama nih

    berhasil ane terapkan di blog ane gan

    coba bisa di cek di http://www.kliniktekno.com/

    kerennnn...

    ReplyDelete
  2. Untuk mengganti tampilan back to top gmn ? Thanks sebelumnya

    ReplyDelete
    Replies
    1. Ubah kode ↑ dengan kode lain
      Daftar kode di sini: http://fortawesome.github.io/Font-Awesome/cheatsheet/

      Delete

Follow & Get Update by Email

CB