-->

-

FANSUBLOGGER - Hari ini saya akan membagikan cara membuat tombol Back to top simple dan sederhana sekali. Dengan bantuan JQuery dan CSS. Tombol back to top ini sangat berguna untuk kalian yang memang blognya menyediakan artikel atau isi postingan yang sangat panjang, sehingga para pengunjung tidak usah cape2 meng scroll ke atas untuk kembali ke halaman lain. Dan tombol ini dilengkapi dengan efek animasi bergerak ke atas/bawah, tidak langsung menuju ke atas halaman.

Ok, cara pemasangannya sangat mudah sekali.

Cara Pemasangan Tombol Back to Top
1. Masuk ke Blogger > Pilih menu Template > Klik tombol Edit HTML. Kemudian pastekan kode Javascript ini di atas </body> atau </head>. 
<script type='text/javascript'>
// Back to top
jQuery(document).ready(function(e){var t=e(&quot;#backtotop&quot;);e(window).scroll(function(){e(this).scrollTop()&gt;=800?t.show(10).animate({opacity:&quot;1&quot;},10):t.animate({opacity:&quot;0&quot;},10)});t.click(function(t){t.preventDefault();e(&quot;html,body&quot;).animate({scrollTop:0},400)})})
</script>

2.Pastekan CSS di bawah ini tepat di atas ]]></b:skin> atau tempatkan dimana saja asalkan berdampingan dengan css lain.
/* CSS Back To Top */
#backtotop{overflow:hidden;position:fixed;z-index:90;right:30px;bottom:0;display:none;width:42px;height:40px;line-height:34px;color:#eee;text-align:center;background-color:#4399cd;font-size:20px;text-indent:0;cursor:pointer;-webkit-transform:translateZ(0);padding:4px 0 0;text-align:center;border-radius:5px 5px 0 0;transition:all .5s}
#backtotop:hover {background-color:#3a89b9;color:#fff;}

3. Penerapan di blog kalian. Pastekan element di bawah ini tepat di atas </body>
<a href='#' id='backtotop'><i class='fa fa-angle-up'/></a>

Catatan: Tombol Back to Top ini menggunakan FontAwesome versi ke-4.3.0. Untuk meng-install FontAwesome ikuti langkah di bawah ini. Jika FontAwesome sudah ter-install di template anda, maka tidak usah menginstall lagi.

Cara Install Font Awesome di Blogger
1. Tinggal kalian pastekan kode di bawah ini tepat di atas <head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Sampai sini Tombol Back to Top sudah terpasang di blog kalian.
Selesai sampai disini tutorial nya. Jangan lupa untuk share dan terus berkunjung kesini.