Cara Membuat Tombol Back To Top di Blog dengan Font Awesome

Tombol atau button, digunakan untuk menavigasikan atau menjalankan perintah yang di berikan. Tombol back to top biasanya ada pada template yang responsive, tombol back to top ini di gunakan apabila kita sudah mencapai halaman bawah dari sebuah artikel yang ada agar kita bisa kembali ke tulisan artikel atau halaman yang atas. Akan tetapi banyak template blog yang tidak memiliki tombol atau button back to top ini, untuk itu kali ini saya akan memberikan artikel tentang cara membuat tombol back to top di blog dengan font awesome.

Kenapa Menggunakan Font Awesome?

Karena kita tidak memerlukan gambar untuk menampilkan bentuk logo atau icon dari back to top ini. Jadi kita hanya perlu memanggil, atau membuat perintah saja agar icon logonya tampil. Kemudian kelebihannya juga font awesome memiliki banyak pilihan icon yang ada, icon ini bisa di ubah sesuai selera sobat.

Pergerakan dari tombol back to top ini cukup lembut jadi kita tidak langsung kembali ke atas halaman dan tidak membuat kaget. Untuk cara pemasangannya ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Tombol Back To Top di Blog dengan Font Awesome

• Masuk ke Dashboard Blogger.
• Pilih Menu Template / Tema.
• Klik Edit HTML.
• Sebelumnya kita harus memasang Code jQuery terlebih dahulu, masukan kode di bawah ini tepat di atas kode </head>.

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

• Karena kita menggunakan Font Awesome, pertama kita masukan dulu kode Plugin Font Awesome nya.
• Cari kode </head> kemudian masukan kode di bawah ini, tepat di atasnya.

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

• Kemudian cari kode ]]></b:skin> atau </style>, kemudian masukan kode CSS di bawah ini tepat di atasnya.

/* Back To Top iFly */
#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}

• Cari kode </body> kemudian masukan kode HTML dan JavaScript di bawah ini 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() > 200) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
});

$('#back-to-top').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});
</script>

Catatan : Jika ingin mengganti icon back to top-nya silahkan ganti fa fa-hand-o-up dengan pilihan kode di bawah ini, atau jika menginginkan kode yang lain silahkan kunjungi website font awesome.

Setelah selesai mengaturnya, pilih Simpan tema. Jika selesai tampilan tombolnya akan muncul seperti ini. Cara Memasang Back to Top di Blog Blogspot

Demikian tutorial dari saya mengenai cara membuat tombol back to top di blog dengan font awesome. Jika ada pertanyaan mengenai cara memasangnya, silahkan masukan ke dalam kolom komentar.