Cara Memasang Tombol Back to TOP Di Blogger

Tombol Back To TOP Dengan Icon SVG

Tombol back to top pada template blogger berfungsi untuk membantu para pengunjung blog jika dirasa mereka ingin kembali ke atas secara instan tanpa harus melakukan scroll manual yang membuat capek jari-jemari hahahah. Oke lanjut ya.

Cara memasang tombol back to top dengan icon SVG di blogger

Cara memasang tombol back to top dengan icon SVG di blogger
Refrensi artikel dari ArlinaDzgn
  • Login dan masuk ke akun Blogger kamu untuk melakukannya.
  • Edit HTML dan cari kode </head>, lalu anda letakkan code di bawah ini tepat sebelum kode di atas
<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 cari kode </body> dan letakkan kode dibawah ini tepat sebelumnya.
<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>
  • Simpan dan lihat hasilnya.

sekian artikel ini tentang cara memasang tombol back to top di blogger dengan mudah, semoga artikel ini membawa banyak manfaat buat teman-teman yang membacanya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *