Membuat Navigasi Back To Top Menggunakan CSS

Hallo Sobat BM7… Bagaimana sobat punya kabar? Baik-baik bukan… :) Pada postingan yang lalu Blog Merdiy@nse7 ini pernah sharing mengenai Cara Membuat Navigasi Back To Top Jquery pada Blog dan Alhamdulillah ada beberapa komentar dari para Sobat BM7 yang menanyakan cara Membuat Navigasi Back To Top Menggunakan CSS, dengan alasan agar mengurangi beban loading blog sobat.

Baiklah, dari hasil Googling dan Blogwalking yang saya lakukan, akhirnya menemukan Script CSS yang ditanyakan oleh sobat Deny Arya Wiranata dan Naufal Syahrial Hidayat ini. Scrip CSS untuk Membuat Navigasi Back To Top ini saya sadur dari Buka[n] Rahasia Blog namun saya akan coba sampaikan dengan menggunakan gaya bahasa saya sendiri tentunya.

Nah, Sobat BM7 berikut adalah langkah-langkah untuk Membuat Navigasi Back To Top Menggunakan CSS :

1. Seperti biasa, Login terlebih dahulu ke akun blog kita.

2. Buka Dashbor, klik Design/Rancangan kemudian klik add/tambah Gadget dan pilih Opsi HTML/Javascript.

Catatan : Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang    menjadikannya melayang.

3. Silakan sobat Copy paste kode berikut :

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>

Catatan : Sobat bisa mengganti Scroll/Back to Top dengan kata-kata yang sobat inginkan. Sedangkan untuk url gambar back to top blog dapat sobat isikan dengan URL yang tersedia dibawah postingan ini atau sabat juga bisa mencarinya dengan Googling dengan keyword “back to top button image”

4. Kemudian silakan sobat simpan dan lihat hasilnya.

Berikut adalah beberapa pilihan URL gambar Back To Top yang dapat sobat gunakan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qJOAeybmaXmDT1EXKkeVe11PIEoDGZo9K7E0Wh17N5ic23EwvaNJVgLpAwrD__fE4lpc4-rnmbuEl0VcbF8Hq0yg-pt3EZkti9NKBcCLhEQWv7EPP16Wxnv110J8iLbSEMKkmKrBs6dz/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdJgxbX2BarDk3Qy4tPuD8AhQvJQbvO2-A0zj-1QYaGgNnQY7EOwt_5Kf5Iikh0DEQ5nr1qw__ReGgk4akkblAfQhO_UrfcjCc9J41OqPe9XyDCzhmofmL2Yvy06az2EGnOOBSaquCcq9/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw78K1nqIzufpFYnjFQkp-Lp4VaywWp4xDLB7vyKIz27W3UM0dtMavtbZmuUn6PIsu3AESW9XGEfNR41P77Pa4MNGMKbOjC-9bJYrEi-VXCE3oaMg3EjDHVFev_fGkpG4G6KU07XrF7m0y/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3SyHDfB6bOxXm-e6TIV6cVw9WxF45R_V_cS2_1qymF1ygJ8etzygX9B01tOFnSCofXbiHW5krb1vgzSbKjYUK5Z761aNDqE_9he7no9V5ceRsCuCh79klyhEKEFWRuNmPpOjAHHIW49vl/s1600/bttp-16.png

Ok sobat BM7, mungkin postingan mengenai cara Membuat Navigasi Back To Top Menggunakan CSS ini saya cukupkan sampai disini, mudah-mudahan postingan ini cukup memuaskan untuk menjawab pertanyaan dari beberapa sobat BM7 diatas dan semoga bermanfaat….