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.

(Baca juga : Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS)

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.

(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)

Cara Memasang Tombol Back To Top di Blog dengan Font Awesome

1. Langkah pertama masuk ke akun Blogger sobat.
2. Pilih menu Tema, pilih Edit HTML.
3. Sebelumnya kita harus memasang kode 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'/>

4. Karena kita menggunakan font awesome, pertama kita masukan dulu kode plugin font awesome nya.
5. 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'/>

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

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

7. 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() &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>

• Catatan : Silahkan ganti kode fa-hand-o-up dengan pilihan kode di bawah ini, atau jika menginginkan kode yang lain silahkan kunjungi website font awesome.

Tampilan Icon	Kode
	fa-level-up
	fa-chevron-up
	fa-arrow-circle-up
	fa-arrow-circle-o-up
	fa-arrow-up
	fa-angle-up
	fa-sort-asc
	fa-chevron-circle-up
	fa-long-arrow-up
	fa-caret-up
	fa-angle-double-up
	fa-caret-square-o-up

8. Setelah selesai mengaturnya, pilih Simpan tema.
9. Jika selesai tampilan tombolnya akan muncul seperti ini.
   

(Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang)

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.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi Blog Tutorial Umum.

Share this