01 August 2017

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.
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.

(Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger)

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

  • Langkah pertama masuk ke akun Blogger sobat
  • Pilih menu Tema, pilih Edit HTML
  • 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 */
#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() &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-chevron-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
  • Setelah selesai mengaturnya, pilih Simpan tema.
  • Jika selesai tampilan tombolnya akan muncul seperti ini.

(Baca juga : Cara Menambahkan Icon di Menu Navigasi Blog)

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.

5 comments

pas template saya belum ada tombol topupnya

pas template saya belum ada tombol topupnya

Wah kebetulan nih saya lagi nyari scriptnya, ijin copy scriptnya ya gan, thanks gan untuk ilmunya...

mantap gan, langsung pasang ah
tx ya

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon