Beranda
Blogging

Cara Membuat Tombol Back To Top Di Blogger

Cara Membuat Tombol Back To Top Di Blogger
Hallo sobat blogger bagaimana nih kabarnya semoga sehat selalu dan di lancarkan rezeki nya amiin.

Kali ini saya akan memberikan tutorial cara membuat tombol back to top di blogger, untuk apa sih fungsinya memasang tombol back to top di blog?.

Menurut saya memasang tombol back to top di blog sangat penting, karena dengan adanya tombol back to top tersebut pengunjung atau visitor tidak perlu capek-capek lagi menggulir ke atas, jadi peran tombol back to top ini sangat penting untuk blog kita.

Oke sudah faham kan sob untuk apa fungsinya memasang tombol back to top di blog kita, baik jika sudah faham mari kita menuju ke tutorial nya simak baik-baik agar tidak terjadi hal-hal yang tidak diinginkan, hhe udah kayak bikin video aja ya sob wkwk, oke sob langsung saja kita ke tutorial nya.

Cara Memasang Tombol Back To Top Di Blog

1. Pertama sobat login terlebih dahulu ke akun blogger sobat.

2. Setelah login lalu sobat klik garis tiga di pojok kiri atas, setelan itu sobat masuk ke mode tema lalu klik edit html.

3. Letakan kode di bawah ini tepat di atas kode </head> agar mudah menemukan nya di keyboard sobat klik CTRL+F lalu cari kode tersebut.
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
4. Setelah itu sobat cari kode ]]></b:skin> pastekan kode di bawah ini tepat di atas kode ]]></b:skin>.
/* Back To Top by masrizki.eu.org */
.masrizkiToTop {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;}
.masrizkiToTop: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;}
.masrizkiToTop.show {visibility:visible; bottom:20px; opacity:1;}

5. Dan terakhir sobat cari kode </body> biasanya letaknya berada di paling bawah, setelah ketemu pastekan kode di bawah ini tepat di atas kode </body>.
<div class='masrizkiToTop'/>
<script>
$(document).scroll(function() {
  return $(document).scrollTop() > 300 ? $('.masrizkiToTop').addClass('show') : $('.masrizkiToTop').removeClass('show')
  }), $('.masrizkiToTop').click(function() {
    return $('html,body').animate({
      scrollTop: '0'
    });
});
</script>

Setelah itu tinggal sobat klik tombol simpan / save selesai, selamat blog sobat sudah terpasang tombol back to top untuk melihat hasilnya silahkan klik tombol demo di bawah ini.


Sekian untuk tutorial cara membuat tombol back to top di blogger, semoga tutorial nya bermanfaat, terimakasih sudah berkunjung ke blog saya.

Posting Komentar