CARA MEMBUAT BACK TO TOP UNTUK BLOGGER TANPA CSS DAN TANPA JAVASCRIPT

CSS memang relatif lebih ringan daripada Javascript namun pada saat render mereka ini memblokir kecepatan halaman blog menuju server karena banyaknya tautan penghubung ke dalam librari librari di website mereka masing masing. Terutama jika elemen dari fitur yang dibuat terbebani oleh link link misalnya link awesome untuk menampilkan ikon yang cantik, link jquerry untuk tombol ekspresi dan reaktifnya. Pokoknya mereka yang sebenarnya terpisah dari sistem internal HTML inti Blogger itu sendiri. Harus dipanggil untuk mengaktifkannya.

back to top sederhana

Bahkan sebuah fitur 'Back To Top' sebuah tombol kecil yang di klik untuk mengembalikan halaman dengan cepat ke atas, memiliki tiga hal berikut:
  1. Kode CSS.
  2. Kode Javascript, jquery.
  3. Link font Awesome, atau link provider ikon lainnya.
Ketiga hal di atas terbukti racun yang ampuh menyakiti dan sekaligus melukai kecepatan halaman blog kita - terutama jika kita mempercayai bahwa elemen kecepatan adalah salah satu faktor SEO yang penting, hingga Google sempat meng-anak emaskan halaman AMP oleh karena demi kecepatan ini.

Akan tetapi apakah tidak bisa membuat tombol yang dapat di klik dan mengembalikan halaman yang sudah di scroll jauh kebawah untuk halaman blogger? Bisa asalkan kalian tetap mengutamakan kesederhanaan.

Jika kalian menggunakan salah satu dari 4 template terbaru:
  1. Contempo cari kode:  <b:template-script async='true' name='indie' version='1.0.0'/>
  2. Emporio cari kode:  <b:template-script async='true' name='vegeclub' version='1.0.0'/>
  3. Soho cari kode: <b:template-script async='true' name='fancy' version='1.0.0'/>
  4. Notable cari kode: <b:template-script async='true' name='rockpool' version='1.0.0'/>
Maka letakan saja kode berikut di atas masing masing pada salah satu dari 4 kode di atas tadi:
<a class='trans color-hover' href='#' id='jump-top-button'>
<center><span class='block black color-hover'><abbr title='klik untuk kembali ke atas'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>
<path d='M13,18H11V10L7.5,13.5L6.08,12.08L12,6.16L17.92,12.08L16.5,13.5L13,10V18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='currentColor'/>
</svg></abbr></span>
<span class='block color-hover upper'/></center>
</a>
Lalu save template.

Kelebihan menggunakan matode ini adalah: Tombolnya simple, cepat dan tidak mempengaruhi kecepatan. Sedangkan kekurangannya adalah tidak stylish. Namun bagi Kalian yang mengusung kesederhanaan model ini tampaknya akan cocok.


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

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Thanks gan, saya akan mempelajari trik2 yg ada diblog ini untuk menambah pengetahuan saya
    Saya newbie yg butuh banyak asupan

    BalasHapus
    Balasan
    1. Sama sama mas Lutfi, newbie yang bersemangat untuk sukses 😊

      Hapus
  2. Jk mau yg model kayak yg aktif di halaman agan skrg ini yaitu dg simbol warna merah kecil mungil tp tetep smat mudah di lihat gimana gan?
    Info link tutornya ke email ya gan
    Terima kadih

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak