CARA MEMBUAT TOMBOL BACK TO TOP

Hai sobat, ane hadir lagi di kehidupan sobat. Tombol back to top ini mungkin gak asing lagi bagi sobat. Pasti sobat semua udah tau fungsi tombol back to top ini kan? Kalo belum tau cari di Google ya hehehe.

Tombol ini ane ambil dari view-source nya blog Mbak Arlina. Langsung aja daripada ane makin gak jelas............

Kalo di blog sobat udah ada tombol back to top, CSS sama javascript tombol back to topnya di hapus dulu ya..

1. Buka blogger.com
2. Buka menu Template terus ke Edit HTML
3. Copy font awesome dibawah dan taruh di atas kode </head>

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

4. Copy jQuery ini dan taruh di atas </head> tapi kalo di blog sobat udah ada jQuery seperti dibawah gak usah ditambahin juga gak apa-apa

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

5. Jika udah, cari kode ]]></b:skin> dan masukkan CSS ini di atas ]]></b:skin>

/* CSS Back To Top */
#BackToTop {display:none;color:#fff;padding:0;font-size:16px;
line-height:40px;transition:all .3s linear;}
.BackToTop {-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:5%;right:2%;z-index:90;}
#BackToTop .fa.fa-arrow-up {background-color:rgba(0,0,0,0.2);padding:13px;transition:all .3s linear}
#BackToTop .fa.fa-arrow-up:hover {background:#e6ae48;transition:all .3s linear}

6. Kemudian taruh javascript ini di bawah </footer>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BackToTop').fadeIn(); } else { $('#BackToTop').fadeOut(); } });
$('#BackToTop').click(function() { $('body,html').animate({scrollTop:0},400);return false }); });
</script>
<div class='BackToTop'>
<a id='BackToTop'>
<i class='fa fa-arrow-up'></i>
</a>
</div>

7. Kemudian simpan template

Subscribe to receive free email updates: