Cara Membuat Back To Top untuk Blogg Ringan dan Responsif

Pastinya sobat sudah tahu dengan Back To Top di Blogger, dan tentunya juga sobatpun sudah tahu fungsi dari tombol Back To Top ini yaitu untuk kembali ke halaman website bagian atas. Letak dari tombol back to top biasanya ada di bagian pojok sisi kanan bawah blogg . Tombol back to top ini sangatlah berguna karena pengunjung blogg cukup dengan satu klik untuk kembali ke halaman atas blogg, jadi tidak dengan mengusap-usap jari-jari di layar smartphone atau melakukan scrolling berkali-kali dengan mouse. Apalagi halaman yang sobat buka isi dari bloggnya telalu panjang dan ditambah banyaknya komentar. Jadi dengan adanya tombol back to top ini sangatlah membantu dan tentunya blogg menjadi user friendly.

Memang kalau untuk template premium atau template gratisan yang sobat dapatkan dari hasil download di google kebanyakan sudah disediakan tombol back to top kadang juga tidak ada. Di sini saya akan memasangnya di template bawaan dari blogspot itu sendiri ada banyak pilihan thema / template yang di sediakan. Yang saya contohkan disini menggunakan template Contempo.

Membuat Back To Top Blogger Ringan Dan Responsif

1. Login ke Blogger Pilih > Dashboard > Pilih Blogg > pilih menu Template atau Tema > cari tulisan Edit HTML.

2. Setelah masuk Edit HTML sobat cari kode </head> bila sobat kesulitan untuk menemukan kode tersebut tekan CTRL+F pada keyboard nanti akan keluar kolom search masukan dan tulis kode </head> di dalam kolom search lalu tekan Enter nanti akan menunjukan letak kode tersebut berada setelah ketemu silahkan sobat paste kode Bootstrap font awesome tepat di atas kode </head> ( kalau belum ada )

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

3. Paste kode CSS Berikut ini tepat di atas kode ]]></b:skin> atau </style>

/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

4. Paste kode Jquery dan html berikut ini tepat di atas </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>            
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});

$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

5. Save template, dan selesai Coba lihat di blog sobat apakah muncul tombol Back To Top

Oke mungkin sudah cukup itu saja yang bisa saya tuliskan di Cara Membuat Back To Top

Semoga bisa membantu dan bermanfaat. Salam Blogger Pemula Bila ada yang mau di tanyakan silahkan tuliskan komentar sobat di kolom komentar bawah ini.