Cara Memasang Tombol Back to Top di Blog Mudah

Cara Memasang Tombol Back to Top di Blog- Apa itu tombol back to top.? Anda bisa lihat di kanan bawah layar monitor Anda. Tombol "Back to Top" Berguna untuk memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya.

Sebenarnya cara memasang tombol Back to Top seperti ini sangat mudah. Baiklah tidak perlu banyak basa-basi lagi kita langsung saja ke TKP.

Berikut ini cara pasang back to top di blogger :

1. Langkah pertama masuk ke blogger kemudian pilih > Tema > Edit HTML.

2. Kemudian cari kode seperti ini "]]></b:skin>".

3. Lalu masukan kode di bawah ini tepat di atas kode "]]></b:skin>".

/* Back To Top KetStar-----------------*/
.KetStarToTop {visibility:hidden; width:50px; height:50px; position:fixed; bottom:50px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; opacity:0; -webkit-transform:translateZ(0); transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.KetStarToTop:hover {opacity: 1; background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.KetStarToTop.show {visibility:visible; bottom:20px; opacity:1;}

4. Jika sudah selesai maka kalian harus mencari kode "</body>".

5. Lalu tempelkan kode di bawah ini tepat di atasnya.

<div class='KetStarToTop'/>
<script>
$(document).scroll(function() {
  return $(document).scrollTop() &gt; 300 ? $(&#39;.KetStarToTop&#39;).addClass(&#39;show&#39;) : $(&#39;.KetStarToTop&#39;).removeClass(&#39;show&#39;)
  }), $(&#39;.KetStarToTop&#39;).click(function() {
    return $(&#39;html,body&#39;).animate({
      scrollTop: &#39;0&#39;
    });
});
</script>

6. Nah jika sudah selesai tinggal kali simpan. Taddaaaahhh jadi deh Tombol Back to Top di Blog kalian.

Itulah bagaimana Cara Memasang Tombol Back to Top di Blog Dengan Mudah yang telah kita bahas. Baiklah sepertinya cukup sekian informasi dari KetStar, Semoga Berhasil......

Tips:
Bila ada yang kurang paham atau ada pertanyaan jangan segan silahkan hubungi saya.

Share this post