-->

Iklan bawah header

Cara Memasang Tombol Back To Top Dengan Icon SVG di Blogger

Tombol back to top

Tombol Back To Top atau Back To Top Buttom merupakan tombol yang memudahkan pengunjung untuk melompat ke bagian atas pada sebuah halaman web. Tombol ini sangat berguna bagi pengunjung yang sedang membaca artikel dengan isi yang panjang dan kemudian ingin kembali ke menu atas dengan cepat.

Tombol Back To Top sering kita jumpai pada bagian sudut kanan atau kiri bawah pada sebuah halaman website. Saat tombol tersebut di klik maka secara otomatis halaman akan ter-scroll ke atas dengan cepat sehingga kita bisa kembali menuju halaman atas pada blog.

Pada tutorial kali ini kita akan membuat tombol Back To Top dengan menggunakan icon SVG. Jadi, blog kalian akan tetap memiliki loading yang cepat dibandingkan dengan menggunakan Font Awesome.

Cara Memasang Tombol Back To Top Dengan Icon SVG

1. Masuk Ke Dashboard Blogger > menu Tema > Edit HTML

2. Cari kode </head> dan letakkan kode dibawah ini tepat diatasnya.


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

3. Selanjutnya tambahkan kode dibawah ini sebelum kode </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>

4. Setelah itu Simpan

Demikianlah tutorial singkat ini. Semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel