Cara Memasang Back to Top di Blog

Back to Top yang akan saya bagikan ini sebenarnya berfungsi untuk men-scroll tampilan pada blog dari bawah ke atas dengan hanya mengklik icon yang ada. Back to Top yang akan saya bagikan ini sangat ringan dan berguna untuk mempermudah pengunjung untuk kembali ke atas tampilan dengan efek Bounce (Memantul) dan Smooth (Lembut). Selain itu juga dilengkapi dengan Font Awesome sebagai icon.nya agar blog tidak menjadi berat.

Baca Juga : Memasang Plugin Font Awesome di Blogger

Back to Top dengan efek Bounce dan Smooth

1. Buka akun Blogger anda
2. Pilih Template -- Edit HTML
3. Letakkan css berikut di atas </style> atau </b:skin>

/*Back To Top*/
#backtotop {background-color: #444;margin: 0;padding: 10px;border-radius: 2px;position: fixed;bottom: 50%;right: 10px;cursor: pointer;display: none;}
#backtotop:hover {background-color: #E73138;}

4. Letakkan kode berikut tepat di atas </body>

<a href='#' id='backtotop'><i class='fa fa-chevron-up' title='Back to Top'/></a>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtotop").fadeIn()}else{$("#backtotop").fadeOut()}});$("#backtotop").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)});var e=$("body")})
//]]>
</script>

5. Tinggal Simpan Template

Silahkan tinggal dilihat, apakah sudah berhasil atau belum. Jika tidak berhasil itu mungkin karena pada blog anda belum ada Font Awesome.nya jadi tinggal ditambah Font Awesome saja dan pasti akan berhasil. Untuk konfigurasinya anda dapat menyesuaikannya sendiri dengan mengubah angka - angka pada JavaScript di atas.