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
- Login ke akun blogger anda
- Pergi ke Template dan pilih Edit HTML
- Kemudian Cari kode seperti dibawah ini
- Jika sudah ketemu letakkan kode berikut seperti contoh nomor 3
- Untuk membuat tampilan back to top nya gunakan kode CSS berikut, kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>
<footer> sampai kode </footer></div> Letakkan kode script html nya disini
Ingat ya sobat setiap Template itu berbeda cari yang serupa
<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() > 200) {
$('#back-to-top').fadeIn();
} else { $('#back-to-top').fadeOut();
}});$('#back-to-top').hide().click(function() {
$('html, body').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
/* 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