Cara membuat Tombol Back to Top dengan Icon Keren dan Responsif

Masih pada bulan ramadhan kali ini saya akan memberikan Informasi Mengenai bagaimana cara membuat menu Tombol Back to Top dengan Icon Keren Responsif Terbaru

Pengertian Back to Top

Apa itu Back to Top jika kamu berada pada sebuah blog sering melihat sebuah tanda biasanya dibagian kiri bawah pada tampilan sebuah blog yang menunjukkan kearah atas, dengan berbagai Icon dan ketika di klik maka akan membawa kamu kepada tampilan utama bagian atas pada sebuah blog maka itu yang disebut Back to Top dalam dunia ngeblog

Dengan adanya back to top pada sebuah blog membantu para pengunjung atau pembaca anda lebih mudah untuk langsung scroll ke bagian atas, back to top harus dimiliki oleh para bloggers untuk menambah kerapian serta menambah kecantikan blognya jadi semakin menarik

Cara Penerapan

Oke sobat blogger bagaimana cara membuatnya, yuk kita mulai kecara penerapan nya

1. Login ke akun blogger anda
2. Pergi ke Template dan pilih Edit HTML
3. Kemudian Cari kode seperti dibawah ini

<footer> sampai kode </footer></div> Letakkan kode script html nya disini

Ingat ya sobat setiap Template itu berbeda cari yang serupa

4. Jika sudah ketemu letakkan kode berikut seperti contoh nomor 3

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><svg style='width:24px;height:24px;vertical-align:-3px' viewBox='0 0 24 24'><path d='M22.78,17.91C22.94,18.16 23,18.42 23,18.7C23,19.08 22.87,19.39 22.57,19.64C22.27,19.89 21.94,20 21.56,20H19.08L12.42,8H11.58L4.92,20H2.39C1.92,20 1.53,19.8 1.22,19.38C0.91,18.96 0.89,18.5 1.17,18L10.78,1.69C11.09,1.22 11.5,1 12,1C12.53,1 12.92,1.22 13.17,1.69L22.78,17.91M4.78,22.31L12,9.38L19.22,22.31L18.5,23L12,20.34L5.44,23L4.78,22.31Z'fill='#ffffff'/></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>

Atau kamu bisa meletakkannya dibagian paling bawah script kode template atau coba letakkan diatas kode </body> dan kemudian lihat apakah eror jika tidak maka kodenya berhasil diterapkan

5. Untuk membuat tampilan back to top nya gunakan kode CSS berikut, kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

/* Back to top */
#back-to-top{background:#1a73e8;color:#fff;padding:8px 10px;font-size:24px;border-radius:100px;border:2px solid #fff}.back-to-top{position:fixed!important;position:absolute;bottom:70px;right:20px;z-index:998}
#share-container {
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
background-color: transparent;
margin-top: 10px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}
.total {border-color:#009688;border-top-style:solid;border-top-width:3px}
.total:hover {background:#009688}

Jika sudah simpan dan coba lihat bagaimana hasilnya

Begitulah informasi kali ini mengenai bagaimana cara membuat menu Tombol back to top responsif Terbaru, sangat mudah bukan jika kurang mengerti bisa langsung gunakan form komentar untuk bertanya, sekian dari saya, Terimakasih