Cara membuat back to top ringan ala editblogtema

tombol kembali keatas blogger

Back to top adalah sebuah tombol yang pada umumnya di letakan di bagian kiri paling bawah halaman blog, tepatnya di sebelah ujung paling kiri bagian footer paling bawah. Kegunaan atau fungsinya adalah untuk menscrool halaman kembali ke bagian atas dengan cepat hanya dengan cara mengklik tombol tersebut.

Jadi benar benar jelas dia berfungsi membantu menavigasi halaman agar lebih cepat kembali ke halaman awal yang letaknya di bagian bawah header blog. 

Terutama jika menimbang untuk membantu pengunjung kembali dengan cepat ke atas hanya dengan cara mengklik sebuah tombol alih alih menscrolling halaman kembali ke atas menggunakan mouse atau menggeser di layar sentuh yang membutuhkan waktu lama, khususnya pada sebuah artikel atau konten yang di tulis sangat panjang.

tombol kembali ke atas

Gambar di atas adalah tombol yang di pergunakan oleh halaman blog ini, yakni back to top ala editblogtema yang di buat dan di ramu berdasarkan contoh contoh tombol back to top yang telah ada, namun di sederhanakan, di ringkas agar lebih ringan dan fast loading. Misalnya membuang ikon font awesome berikut link pemanggilnya, membuang link img dan menggantikannya dengan SVG icon yang lebih alami jika di embed ke dalam HTML.

Cara membuatnya:

Tambahkan kode ajax berikut ke atas kode </head> jika belum ada di dalam template Anda (abaikan jika sudah ada):

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

1. Tambahkan CSS

Copy CSS berikut dan letakan di atas tag penutup </head> di dalam pengaturan editor HTML blogger blogspot Anda.

<style> /* Tombol kembali ke atas*/
#back-to-top{background:transparent;color:#CC00CC;padding:0px 0px;font-size:10px}
.back-to-top{position:fixed!important;position:absolute;bottom:0px;right:1px;z-index:9000}</style>

Keterangan: Kita dapat merobah warna dengan mengganti kode warna yang di merahkan.

2. Tambahkan HTML /JS

Copy kode berikut dan letakan di atas tag penutup </body> masih di dalam pengaturan editor HTML blogger blogspot Anda.

  <div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>kembali ke atas
<svg style='width:24px;height:18px' viewBox='0 0 24 18'>
    <path d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z' fill='currentColor'/>
</svg>
</a></div>
<script>            
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});

$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

Lalu save template.

Anda juga bisa membuat tombol back to top atau tombol kembali ke atas menggunakan CSS, HTML dan JS dengan mudah tanpa menggunakan link eksternal seperti contoh yang telah kami lakukan di atas. Contoh pembuatan scrolling back top ini juga dapat di pelajari di w3school. Namun bagaimana tampilannya (desainnya) itu tergantung daya kreativitas Anda sendiri.

Sebenarnya cara pembuatannya sama saja dengan cara pembuatan tombol back to top template viomagz-nya Mas Sugeng.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...


  1. Back to top ini kalau ada iklan anchor di bawah, otomatis ke dorong apa ketutup?

    BalasHapus
    Balasan
    1. Floating layer paling atas dengan pengaturan z-index:99999...

      Hapus
  2. Jk mau yg model kayak di halaman ini mungil tp smat gimana kak ada link tutornya?

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak