Cara Memasang Tombol Back To Top dengan SVG - Arlina Design
Apa kabar sobat Arlina Design, mudah-mudahan dalam keadaan sehat wal'afiat. Sudah lama juga saya tidak update postingan di sini mungkin karena aktivitas offline dan juga saat online pun saya hanya cek yang berhubungan dengan template Blogger di Idntheme.

Cara Memasang Tombol Back To Top dengan SVG

Pada Tips Blogger kali ini Arlina Design akan berbagi tips Cara Memasang Tombol Back To Top dengan SVG. Mungkin sobat sudah tahu fungsi utama dari tombol Back To Top yang memudahkan pengunjung blog untuk kembali ke atas secara instan tanpa harus scroll halaman secara manual, tentunya ini akan sangat membantu pengunjung saat membuka halaman dengan isi artikel yang panjang untuk kembali ke menu atas dengan instan.

Bagi sobat yang penasaran untuk cara memasangnya di blog, mari kita ikuti langkah-langkah di bawah ini.

Cara Memasang Tombol Back To Top dengan SVG


Pertama, buka Blogger > Klik menu Tema dan tombol Edit HTML > Tambahkan kode ini 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>

Selanjutnya tambahkan kode di bawah ini 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>

Kemudian klik tombol Simpan tema dan lihat hasilnya di blog sobat.



Sekian untuk postingan Cara Memasang Tombol Back To Top dengan SVG dari Arlina Design, semoga bermanfaat bagi sobat. Terima kasih dan wassalam.

Cara Memasang Tombol Back To Top dengan SVG

Apa kabar sobat Arlina Design, mudah-mudahan dalam keadaan sehat wal'afiat. Sudah lama juga saya tidak update postingan di sini mungkin karena aktivitas offline dan juga saat online pun saya hanya cek yang berhubungan dengan template Blogger di Idntheme.

Cara Memasang Tombol Back To Top dengan SVG

Pada Tips Blogger kali ini Arlina Design akan berbagi tips Cara Memasang Tombol Back To Top dengan SVG. Mungkin sobat sudah tahu fungsi utama dari tombol Back To Top yang memudahkan pengunjung blog untuk kembali ke atas secara instan tanpa harus scroll halaman secara manual, tentunya ini akan sangat membantu pengunjung saat membuka halaman dengan isi artikel yang panjang untuk kembali ke menu atas dengan instan.

Bagi sobat yang penasaran untuk cara memasangnya di blog, mari kita ikuti langkah-langkah di bawah ini.

Cara Memasang Tombol Back To Top dengan SVG


Pertama, buka Blogger > Klik menu Tema dan tombol Edit HTML > Tambahkan kode ini 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>

Selanjutnya tambahkan kode di bawah ini 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>

Kemudian klik tombol Simpan tema dan lihat hasilnya di blog sobat.



Sekian untuk postingan Cara Memasang Tombol Back To Top dengan SVG dari Arlina Design, semoga bermanfaat bagi sobat. Terima kasih dan wassalam.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo