Cara Memasang Back to Top SVG di Blog

Halo sobat blogger, pada kesempatan ini Merdekapedia akan memberikan Cara Memasang Back to Top SVG di Blog dengan kode CSS yang User Friendly.

Sebelum memulai pemasangan, Apa itu Back to Top ?

Back to Top diartikan kata dari bahasa Inggris yang berarti Back (Kembali), to (ke), Top (Atas/Awal). Jadi dapat disimpulkan bahwa Back to Top di Blog merupakan jalan pintas untuk kembali ke atas postingan atas ketika pengguna telah berada di tengah atau di bawah postingan tersebut.

Pemasangan Back to Top di Blog kali ini menggunakan Scalable Vector Graphics atau disingkat sebagai SVG.

Apa itu SVG ? 

SVG merupakan format gambar yang berbasis XML sebagai langkah awal agar terbentuknya gambar vektor dua dimensi.

Bagaimana Cara Memasang Back to Top Dengan SVG di Blog ?


Langkah pertama, silahkan login di blogger dengan akun google kamu.
Setelah itu, Pilih Tema > Edit HTML dan silahkan copy kode berikut.

<style>
/* Back To Top */
.backtotop{display:none;background:#888888;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:#000000}
</style>

Paste kode diatas tepat sebelum </head>

Berikutnya, Paste atau Tempel kode berikut tepat 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>

Simpan Tema, Lihat hasilnya.

Demikianlah Cara Memasang Back to Top Dengan SVG di Blog. Silahkan berikan komentar jika mempunyai pertanyaan atau keluhan. Selamat berjumpa kembali di internet

0 Response to "Cara Memasang Back to Top SVG di Blog"

Post a Comment

Berkomentarlah sesuai topik artikel. Komentar yang tidak relevan dengan topik artikel akan dimoderasi dan dihapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel