Cara Membuat Button Back To Top Pada Blog Dengan Font Awesome

KeyzeX – Button atau Tombol dapat berguna untuk menjalankan perintah sesuai dengan yang diberikan. Button banyak sekali kegunaannya seperti submit, reset, cancel dan lain-lain. Tapi untuk artikel ini kita akan membahas mengenai Cara Membuat Button Back To Top Pada Blog Dengan Font Awesome.

https://fontawesome.com/images/open-graph.png

Kenapa harus Button Back To Top ?

Button Back To Top ini digunakan apabila laman web sudah mencapai batas halaman bawah dari sebuah laman atau artikel yang di kunjungi kemudian agar pengunjung dapat kembali ke laman atau artikel paling atas sehingga dapat memudahkan pengunjung dalam scrolling laman dan pemasangannya pun mudah.

Kita hanya perlu memanggil icon pada font awesome ini dan tidak perlu mengupload gambar atau sesuatu lainnya. Kemudian font awesome ini memiliki banyak icon lainnya yang cocok untuk di tampilkan sesuai dengan selera.

(Baca Juga : Cara Menghilangkan Tang dan Obeng di Blog)

Pergerakan dari button ini juga sangat lembut seperti halnya scrolling santai dan tidak langsung kembali ke atas jadi para pengunjung tidak dibuat kaget dengan hal ini. Untuk Cara Membuat Button Back To Top Pada Blog Dengan Font Awesome dengan mudah yuk simak tutorial di bawah ini.

Cara Membuat Button Back To Top Pada Blog Dengan Font Awesome

1. 1. Pastikan agan sudah login pada Blogger.
   2. Masuk pada bagian Template atau Tema lalu klik Edit HTML.
   3. Kemudian masukan kode di bawah ini tepat sebelum atau di atas kode </head> 

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

1. 1. Langkah selanjutnya adalah pemasangan Font Awesomenya, untuk agan yang belum punya font awesome ikuti langkah ini. Cari kode </head> kemudian tempelkan kode di bawah ini tepat diatasnya.

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

1. 1. Kemudian cari kode ]]></b:skin> atau </style>, lalu masukan kode CSS di bawah ini tepat di atas kode tadi.

/* 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}

1. 1. Cari Kode </body> kemudian masukan kode HTML dan Javascript tepat di atasnya.

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-hand-o-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>

1. Langkah terakhir adalah Simpan Template dan lihat hasilnya.