Cara Memasang Tombol Back To Top dengan SVG

Kali ini Arlina Code akan berbagi tips Cara Memasang Tombol Back To Top dengan SVG.


Tombol Back To Top dengan SVG ini fungsinya sama seperti tombol back to top seperti di tutorial sebelumnya di blog ini, perbedaannya hanya pada icon pada tombol ini menggunakan SVG yang lebih ringan dari icon format gambar. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Tombol Back To Top dengan SVG memiliki peranan yang cukup penting bagi sebuah situs dengan konten yang memiliki isi halaman yang panjang, untuk situs yang memiliki banyak informasi pada halamannya akan membuat konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.

Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini :

Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian tambahkan kode di bawah ini tepat sebelum </head>

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Selanjutnya tambahkan kedua kode di bawah ini sebelum </body>

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>

<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Langkah selanjutnya Simpan tema dan lihat hasilnya di blog sobat.