Cara Membuat Back To Top Button Blogger

Jumpa lagi dengan bloggerku.com. Kali ini bloggerku akan membagikan cara untuk membuat back to top. Back to top adalah sebuah tombol yang ketika di klik akan menscroll ke atas, ini tidak terlalu di butuhkan tapi jika artikel sobat panjang panjang mungkin ini akan sangat berguna.
Nah sebelum membahas lebih lanjut kita harus mengetahui dulu apa saja keuntungan dan kerugiannya.

Keuntungan yang pertama adalah membuat blog sobat menjadi tidak terlalu sepi, yang kedua adalah pengunjung tidak akan kesulitan untuk menscroll atau kembali ke atas. Kerugiannya... Yh, mungkin kerugiannya tidak ada, hanya akan menambahkan berat blog, tapi tenang saja tidak menambah berlebihan kok, hanya beberapa saja kurang dari 1kb

Oke, lanjut ke langkah pemasangan. Langkah pertama adalah sobat harus sudah memasang font awesome terlebih dahulu, untuk yang belum memasangnya sobat bisa mencari tutorialnya di blog ini.

Langkah Pemasangan Back To Top :

1. Seperti biasa sobat login dulu ke blog sobat
2. Sebelumnya pastikan sudah memasang font awesome, bila belum silahkan buka Cara Memasang Font Awesome Di Blog
3. Setelah itu masuk ke bagian Template > Edit HTML
4. Copykan kode dibawah ini tepat di atas kode ]]></b:skin>

#back-to-top{position:fixed;bottom:50px;right:50px;width:50px;height:50px;background:#0089ff;color:#fff;text-align:center;line-height:50px;font-size:20px;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);border-radius:5px;opacity:0;transform:translateY(100px)}
#back-to-top:hover{box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}
#back-to-top.show{opacity:1;transform:translateY(0px)}

Catatan : Silahkan sobat ganti kode #0089ff dengan warna yang sobat inginkan, bagi yang belum mengatahui kode hex silahkan sobat lihat kumpulan kode warna

5. Setelah itu copykan juga kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$("body").append('<div id="back-to-top"><i class="fa fa-arrow-up"/></div>'),$("#back-to-top").click(function(){$("html,body").animate({scrollTop:"0"})})
$(function(){function o(){return window.pageYOffset}var n=100;$(window).scroll(function(){var t=o();t>=n?$("#back-to-top").addClass("show"):$("#back-to-top").removeClass("show")})});
//]]>
</script>

6. Langkah terakhir silahkan sobat Save/Simpan dan lihat hasilnya

Nah sekian artikel untuk cara membuat back to top pada blogger, jangan lupa kunjungi terus situs bloggerku.com agar tidak ketinggalan update. Ssttsts.. Ada teknik teknik SEOnya juga loh, Follow aja terus bloggerku
Semoga bermanfaat yh..