xguntur.com - Hi apa kabar kalian, baik? atau bagaimana :v semoga saja baik ok hehe, maaf ya jarang update artikel setiap hari soalnya saya sibuk urusan duniawi apalagi dibulan puasa ini selalu mudah lelah.
Untuk artikel kali ini saya akan membagikan tutorial Cara Memasang Tombol Back to Top dengan SVG di blog dengan mudah dan cepat, sebelumnya pasti kalian udah tahu fungsi utama back to top itu sebagai alat scroll otomatis ke atas jika di tekan, fungsi ini tentunya sangat berguna dan memudahkan pengunjung saat membaca artikel yang panjang untuk kembali keatas.
bagaimana menarik bukan kapan lagi untuk memasangnya, untuk itu jika kalian ingin memasangnya langsung saja ke tutorial berikut ini:
Cara Memasang Tombol Back to Top
- Langkah pertama login ke blogger.com
- Klik menu Tema lalu menu Edit HTML
- Tekan Ctrl + F cari kode </style> atau ]]></b:skin>
- Lalu tambahkan kode CSS di bawah ini tepat diatas kode yang dicari tadi.
/* 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}Selanjutnya cari kode </body> lalu tambahkan kode dibawah ini tepat diatas kode </body> tadi.
<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>Jika semua tahap diatas selesai klik Simpan Tema dan lihat hasilnya diblog kalian.
Bagaimana mudahkan bukan Cara Memasang Tombol Back to Top dengan SVG. ohiya untuk warna dan posisi tombol back to topnya kalian hanya perlu edit di bagian kode CSSnya saja, sekian dulu untuk artikel kali semoga bermanfaat wasalam.