Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah

==Iklan Dipate Disini===

Lapakinfo.net - Pada kesempatan ini saya akan berbagi tutorial yaitu Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah, tombol back to top ini biasa kita jumpai pada  bagian bawah sudut kanan blog, ketika tombol back to top ini kalian klik maka akan otomatis langsung ke atas tanpa kalian melakukan scroll lagi. Tombol back to top ini salah satu komponen yang wajib kalian pasang pada blog kalian,karena dengan memasang tombol back to top ini akan mempermudah pengunjung untuk melompat ke bagian atas blog.

Tombol back to top menggunakan icon svg ini pertama kali saya lihat pada template viomagz, setelah saya coba ke beberapa template lainnya dan sukses tanpa ada error sedikitpun. Untuk contohnya kalian bisa lihat pada blog saya sendiri lapakinfo.net di bagian bawah kanan blog ini maka akan terilhat tombol back to top menggunakan icon svg. Jika pada template kalian belum ada tombol back to top dan ingin memasang tombol back to top menggunakan icon svg kalian bisa ikuti tutorialnya di bawah ini.

Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah

1. Buka Blog kalian.

2. Pilih Tema dan pilih Edit HTML
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></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;}

4. Lanjut kalian cari kode </footer> dan letakan kode di bawah tepat di bagian bawah kode tersebut

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

5. Sekarang copy kode di bawah ini dan letakan di atas kode </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>  

6. Untuk kode di atas kalian juga bisa meletakannya di bagian bawah kode No 5, nanti hasilnya akan 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>  

Silahkan kalian atur posisi back to top pada CSS, atur sesuai kalian dan jika perlu rubah warna iconnya pada CSS tersebut.

7. Simpan template kalian dan selesai.

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Tombol Back To Top Menggunakan Icon Svg Dengan Mudah, jika kalian memiliki pertanyaan seputar postingan di atas atau seputar blogger silahkan kalian bertanya pada kolom komentar di bawah ini. Semoga bermanfaat buat kalian semua dan terimakasih sudah berkunjung.

==Iklan Dipate Disini===