Skip to main content

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.

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. 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> 
  4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
  5. 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.
  6. <link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
  7. Kemudian cari kode ]]></b:skin> atau </style>, lalu masukan kode CSS di bawah ini tepat di atas kode tadi.
  8. /* 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}
  9. Cari Kode </body> kemudian masukan kode HTML dan Javascript tepat di atasnya.
  10. <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>
  11. Langkah terakhir adalah Simpan Template dan lihat hasilnya.


Demikian untuk tutorial Cara Membuat Button Back To Top Pada Blog Dengan Font Awesome dengan mudah, terima kasih bagi pembaca yang sudah menyimak dengan baik. Jika ada yang kurang jelas dapat di tanyakan di kolom komentar.

(Baca Juga : Menghindari Blog Agar Tidak Menjadi Korban AGC Auto Blog)

Catatan :
  • Ubah kode <i class='fa fa-hand-o-up'/> sesuai dengan selera agan.
  • Untuk melihat icon lainnya dapat mengakses website resmi Font Awesome


SEMOGA BERMANFAAT
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar