Cara Memasang Tombol Back to Top SEO Friendly di Blog

Baca Juga

Cara membuat, menampilkan, atau memasang tombol Back to Top SEO Friendly & Responsive di Blog Blogspot.

TOMBOL Back to Top (BtT Button) adalah ikon atau gambar kecil di bagian bawah blog untuk memudahkan pengunjung kembali ke bagian atas blog tanpa harus scroll mouse.

Back to Top Button allows your website visitors to easily scroll back to the top of the page -letting users jump to the top of the page.

Yang dimaksud tombol "Back to Top" SEO Friendly & Responsif adalah tidak mempengaruhi kecepatan loading dan mobile friendly.

PENTINGKAH?

Penting gak penting. Jika halaman blog Anda pendek, gak penting. Tapi jika tulisannya panjang, jadinya penting.

Benar, user bisa klik link "Home", tapi 'kan itu mah mengarah ke halaman depan, bukan ke atas (top of page). Selengkapnya, baca deh "Sejarah Back to Top".

Posting ini "hanya" berbagi soal bact to top yang dipasang di Blog Demo ini, di kanan bawah. 

Cara Memasang Tombol Back to Top SEO Friendly di Blog

1. Klik Tema > Edit HTML

2. Scroll ke bawah dan COPAS kode berikut ini tepat di atas kode </body>

<span class='back-to-top'><a href='#'> &#8593; </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>

That;s it! Just "Save Template" and tombol Back to Top SEO Friendly & Responsive sudah muncul di blog Anda.

Tombol Bact to Top Alternatif

Kode back to top di atas, muncul terus, meski halaman tidak discroll ke bawah. Jika ingin tombol back to top baru muncul ketika halaman discroll ke bawah, gunakan kode berikut ini.

Copas kode berikut ini di atas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

Pasang kode CSS ini di atas kode ]]></b:skin>

#back-to-top {background:#000000;color:#ffffff;padding:8px 10px;font-size:24px;border-radius: 22px;box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);}
.back-to-top {position: fixed !important;position: absolute;bottom: 25px;right: 20px;z-index: 998;}

Pasang link ke Awesome Font:
Pastikan di template blog Anda sudah terpasang Link ke Awesome Font di atas kode </head> seperti ini:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Jika belum ada, copas kode tersebut di atas kode </head> tadi.

Demikian Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger (http://blogromeltea.blogspot.com).*