Cara Membuat Tombol Back To Top Keren Ringan Pakai Ikon SVG

Santos el Salam

5 Februari 2021

Sebenarnya saya sudah pernah memposting tutorial ini pada postingan lama saya yang berjudul "Cara Membuat Tombol Back To Top Keren Fast Loading di Blog". Pada artikel tersebut, saya menggunakan font awesome untuk ikon pada tombol back to top nya. Nah, kali ini saya akan membagikan lagi tutorial serupa namun ikon saya ganti menggunakan ikon svg sehingga loading blog menjadi lebih ringan dan cepat. 

Sebagaimana yang kita tahu, penggunaan font awesome pada blog memang cukup mempengaruhi kecepatan blog sehingga loading menjadi sedikit lebih lambat. Oleh karenanya, saya pun mencoba modifikasi lagi script untuk membuat tombol back to top pada artikel lama tersebut menggunakan ikon svg agar loading lebih cepat. Hal ini saya lakukan juga sebagai jawaban dari pertanyaan yang kebetulan masuk di kolom komentar pada artikel tersebut. 

Meski pakai ikon svg, bentuk tampilannya tetap saya buat sama hanya warna backgroundnya saya ubah menjadi hitam agar tampak elegan. Saya tambahkan pula efek hover agar lebih menarik lagi. Perbedaan lainnya tentu saja ikon pada tombol ini akan langsung tampil tanpa perlu waktu delay karena dibuat menggunakan ikon svg. Tampilannya seperti screenshot di bawah ini:

Sedikit mengulas, tombol back to top (kembali ke atas) memang cukup penting keberadaanya di blog. Ia berguna untuk membantu para pembaca ketika hendak kembali menuju artikel bagian atas. Dengan menyentuh tombol ini, mereka tidak perlu susah payah menggulir artikel untuk kembali ke bagian atas postingan. Tentunya fungsi seperti ini akan sangat cocok jika anda memiliki artikel-artikel panjang di blog anda. 

Selain terkait fungsinya, keberadaan tombol back to top ini juga akan membuat tampilan blog menjadi lebih menarik seperti situs-situs beken di luar sana. Tanpa basa-basi lagi, mari ikuti saya untuk membuat tombol back to top keren dan ringan menggunakan ikon SVG. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

#back-to-top svg{height:36px;width:40px} 

.back-to-top {background:#333333; border-radius:4px; position:fixed!important; position:absolute; bottom:20px;right:20px;z-index:999} .back-to-top:hover{background-color:#E73138}

4. Selanjutnya cari kode </body> dan letakkan kode berikut ini di atasnya.

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> <svg viewBox="0 0 24 24">
    <path fill="#ffffff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg> </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>

5. Simpan kembali template anda.

Hanya itu saja. Sekarang coba lihat hasilnya. Tombol back to top keren dan ringan pun sudah terpasang di blog anda. 

Kalau misalnya ingin agar saat bergerak ke atas tampilannya lebih halus, anda bisa tambahkan kode berikut ini di atas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Kalau di template blog anda sudah ada maka tidak perlu lagi ditambahkan. Opsional saja agar javascriptnya ikut bekerja. Demikian. Semoga bermanfaat.

 

Labels: Blogging

Thanks for reading Cara Membuat Tombol Back To Top Keren Ringan Pakai Ikon SVG. Please share...!

Facebook

Twitter