Cara Membuat Tombol Back To Top di Blogger

Membaca artikel yang menarik di blog memang sangat mengasyikan dan bisa menghabiskan waktu berjam-jam kalau artikel atau konten yang kita baca adalah konten yang bermutu. Artikel dengan tulisan yang panjang dengan biasa terbagi menjadi beberapa bab. Sebenarnya artikel yang panjang misalnya sampai 1000 kata, bisa dibuat menjadi beberapa halaman, hanya saja banyak pembaca yang lebih memilih membaca artikel dalam halaman meskipun panjang.

Kelemahannya ketika membaca artikel yang panjang adalah ketika sudah sampai pada bagian bawah artikel dan pembaca ingin kembali ke bagian atas halaman artikel, harus melakukan scrool mouse terlebih dahulu. Mungkin ini sedikit merepotkan pembaca, apalagi kalau pembaca yang tidak sabaran, bisa-bisa tidak jadi balik lagi ke halaman atas, malah mengclose halaman blog yang dibaca.

Baca juga: Cara Cek Broken Link di Blog

Kalau kita mau memberikan kenyamanan yang maksimal kepada pengunjung blog kita, tentu tidak ingin hal seperti yang sudah saya ilustrasikan di halaman 2 terjadi. Cara paling mudah untuk memudahkan pembaca blog kembali ke halaman atas adalah dengan membuat tombol back to top atau scrool to top. Kelihatannya sangat simple dan mudah tapi ini menjadi perhatian pengunjung blog.

Baca juga: Cara Hapus Broken Link di Blog

Cara membuat tombol back to top pada halaman blogger sangat mudah. Kita hanya perlu menambahkan widget blog kita.

Pilih menu tata letak atau layout di halaman dashboard blog. Kemudian pilih menu tambah widget atau gadjet seperti yang tertulis pada gambar di atas.

Dari sekian banyak pilihan widget, pilihlah widget untuk HTML/ Javascript. Karena kita akan memasukan kode javascript pada widget. Namun sebelum memasukan kode javacript ke widget, anda harus menyisipkan kode berikut di atas kode </head> pada template blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Jika kode tersebut tidak disisipkan bagian head, anda harus membuat kode lain pada bagian body template untuk memanggil referensi javascript. Jika dimasukan di bagian body template akan mempengaruhi kecepatan blog. Jadi sebaiknya disisipkan di bagian atas. Kode tersebut digunakan untuk memanggil referensi javascript yang terdapat di dalam widget/ gadjet.

Setelah itu, anda buka widget yang telah ditambahkan, kemudian sisipkan kode berikut:

<!--Mulai Kode tombol back to top-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});


jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>


<style>
div#page {
max-width: 900px;
padding: 20px;
margin-left: auto;
margin-right: auto;
}

.back-to-top {
position: fixed;
right: 0px;
bottom: 2em;
text-decoration: none;
background-color:transparent;
color: #000000;
font-size: 12px;
display: none;
padding: 1em;
z-index:9999;
}

.back-to-top:hover {
text-decoration: none;
}
</style>


<!--Kode dibawah adalah ikon tanda panah yang bisa diganti-->

<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiabvZgzMFw2azeGsAOTPb1xKn8yXdUk6U3KualxmLB8Q5bqllf6VDlhRPYseLEzUSL2KwQjTMvUG8xn5PIASpi0Ee-XQgOQxYzmmjzs4oov329YZBArwkcHukpMaEOtxlAdFdbiqsdh0ir/s1600/back+to+top+.png" alt="Back to Top" / /></a>


<!--Akhir kode back to top-->

Kode diatas menggunakan jquery untuk membuat tombol back to top sehingga tampilan tombol menjadi lebih bagus.