Cara Membuat Tombol Back To Top Blogger Dengan Icon SVG

Tombol Back to top atau biasa disebut back to top button pada blogger memang adalah salah satu komponen wajib yang harus dipasang pada blog. Ini mempermudah kita untuk melompat kembali ke bagian atas pada sebuah halaman web yang kita kunjungi. Cara ini sangat berfungsi untuk blog yang memilili postingan dengan jumlah kata yang banyak.

Tombol back to top biasanya kita jumpai pada sudut kanan atau kiri bawah pada sebuah website. Ketika tombol tersebut di klik maka secara otomatis kita akan melakukan scroll secara cepat sehingga kita bisa kembali menuju page halaman atas pada blog. Ini tentunya sangat memudahkan untuk menuju ke bagian top pada blog tanpa harus melakukan scroll.

Tombol Back To Top Blogger Dengan Icon SVG pertama kali saya lihat pada template viomagz versi 3.3.0 dan coba saya terapkan pada beberapa template lain dan sukses. Pembaharuan yang terjadi pada back to top kali ini adalah menambahkan icon Svg dan tidak lagi menggunakan font Awesome.

Font Awesome memiliki pengaruh yang cukup tinggi pada loading blog, sehingga jika semakin banyak menggunakan font awesome maka kana semakin memperlamabat proses pemuatan blog.

Contoh yang saya terapkan disini adalah pada blog saya sendiri yang awalnya menggunakan back to top dengan font Awesome lalu kemudian merubahnya menggunakan Icon SVG yang tidak membutuhkan waktu untuk melakukan loading. Berikut ini cara pemasangannya pada blogger / blogspot.

Cara Pasang Tombol Back To Top Icon SVG Keren di Blogspot

Pada cara pembuatan sekaligus pemasangan back to top ini, akan dilakukan dengan tiga tahapan penting, yaitu pemasangan CSS, pelakan kode HTML serta pemasangan Script.

Sebelumnya, silakan Anda login ke akun blogger terlebih dahulu. Masuk ke Theme lalu pilih Edit HTML (Untuk yang menggunakan blogger versi lama). Sementara bagi Anda yang sudah menggunakan blogger versi baru, Ikuti langkah-langkahnya berikut ini.

• Masuk Ke Akun Blogger
• Pilih Theme / TEMA
• Klik Tanda 3 titk disebelah kanan
• Pilih Edit HTML

Setelah Anda sudah masuk ke dalam menu Edit HTML, sekanjutnya, ikuti langkah pemasangannya berikut ini. Namun sebelumnya, jika pada template Anda sudah terdapat back to top, sebaiknya dihapus terlebih dahulu. Kemungkinan pada blog Anda namanya tidak sama, bisa saja menggunakan nama yang berbeda atau tidak menggunakan nama Back To Top. Jadi silakan cari sendiri dalam template blog Anda.

1. Pertama, pastekan kode CSS dibawah ini sebelum ]]></b:skin>

#back-to-top{background:#000080;color:#fff;padding:6px 8px;font-size:24px;border-radius:22px;}
.back-to-top{position:fixed!important;position:absolute;bottom:75px;right:20px;z-index:998;}
.back-to-top svg{width:24px;height:24px;vertical-align:middle;margin-top:-5px;}
.back-to-top svg path{fill:#fff;}

2. Pasang Kode HTML Berikut Setelah </footer>

<div class='back-to-top'>
    <a aria-label='back to top' href='#' id='back-to-top' title='back to top'>
        <svg viewBox='0 0 24 24'>
            <path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/>
        </svg>
    </a>
</div>

3. Selanjutnya, tambahkan kode JS berikut ini sebelum </body>

<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>  

Anda juga bisa meletakkan kode diatas ini dibawah kode HTML back to top. Maka akan terlihat seperti ini

<div class='back-to-top'>
    <a aria-label='back to top' href='#' id='back-to-top' title='back to top'>
        <svg viewBox='0 0 24 24'>
            <path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/>
        </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>  

Kode java script diatas sebenarnya sebagai smooth scroll saja. Bisa digunakan bisa juga tidak. Namun saya justru merekomendasikan penggunaan script tersebut. Script ini tidak menyebabkan tambahan loading blog dan menjadikan scroll to top menjadi lebih halus.

Silakan atur posisi tombol back to top pada pengaturan CSS. Sesuiakan dengan tema blog yang Anda gunakan. Silakan ubah warna icon-nya jika perlu. Dan untuk jenis warna yang digunakan, Anda bisa memilihnya pada halaman Color Picker Dewa Plokis Blog Pada link Dibawah

• Color Picker Dewa Plokis

Demikian, tutorial kali ini tentang Cara Membuat Back To Top Dengan Icon SVG, Semoga bermanfaat. Jika ada yang kurang jelas, jangan sungkan untuk menayakannya di kolom komentar dibawah. Terima kasih.

Share