Cara Memasang Tombol Back to Top di Blog Ala Arlina

Assalamu'alaikum wr.wb - Pada artikel kali ini Fellcia akan berbagi ilmu tentang Cara Memasang Tombol Back to Top menggunakan SVG.

Fungsi dari fitur Back To Up ini untuk memudahkan pengunjung kembali keatas tanpa harus men-scroll secara manual.


Cara Memasang Tombol Back To Top Di Blog


Pertama buka, Blogger -> Pilih Tema -> Edit HTML kemudian tambahkan kode berikut 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>

Kemudian tambahkan kode berikut 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>

Terakhir simpan template, dan lihat hasilnya.

Akhir kata wassalamu'alaikum wr.wb

Sumber: Arlina

0 Comments

Posting Komentar