Cara Membuat Tombol Back to Top Roket di Blogger
Cara Membuat Button Back to Top Roket Blogger – Halo sobat blogger, pada kesempatan kali ini saya akan membagikan tutorial, yaitu cara membuat tombol return/back to top roket. Tombol back to top ini biasanya terletak pada pojok bawah sebuah web.
Tombol back to top merupakan fitur yang penting untuk sebuah blog, khusunya blog yang memiliki artikel panjang. Tombol back to top berfungsi untuk kembali ke bagian halaman paling atas, jadi saat Anda membaca artikel Anda tidak perlu melakukan scroll untuk kembali ke halaman atas.
Selain itu, tombol back to top ini bisa mempercantik tampilan web Anda, khususnya dengan tambahan animasinya. Nah langsung saja berikut tutorial cara memasang tombol back to top di blogger dengan ikon rocket svg dan tentunya smooth saat scroll.
Cara Membuat Back to Top Roket di Blogger
– Langkah 1: Masuk blogger.com → Pilih menu Tema → Edit HTML.
– Langkah 2: Copy dan paste kode CSS berikut diantara tag <style> dan </style>, agar lebih tertata silahkan paste diatas </style> yang sudah ada di template Anda.
.back-to-top svg {width:24px;height:24px;vertical-align: middle}
.back-to-top svg path {fill: #4d90fe;}
.back-to-top:hover svg path{fill: #f95b41}
.back-to-top:hover{transform: rotate(-45deg);}
.back-to-top {background:#fff;padding:9px 9px;font-size:24px;border-radius: 100px;transition:all .30s ease-in-out;;border:2px solid #4d90fe;position: fixed !important;position: absolute;bottom: 20px;right: 20px;transition:transform .5s ease-out;z-index: 999;box-shadow:0px 2px 10px 0px #aaaaaa}
Untuk mengganti warna silahkan ganti kode hex warna pada fill: #… dan border: 2px solid #…..
– Langkah 3: Selanjutnya copy dan paste kode berikut dibawah tag </head> atau juga bisa diletakkan setelah tag <body>.
<div class='back-to-top'>
<a href='' title='Back To Top'>
<svg viewBox='0 0 24 24'>
<path d='M7.961 17.563c-.182-.037-.366.044-.461.203-.475 1.02-1.576 1.592-2.684 1.395-.203-1.108.373-2.213 1.397-2.681.204-.125.271-.392.146-.597-.067-.111-.182-.188-.311-.205-1.577-.297-3.193.262-4.252 1.469C.545 18.865.074 21.03.5 23.113c.031.185.175.329.359.359.498.081 1.002.12 1.508.12 1.834.102 3.625-.581 4.931-1.873.89-1.054 1.259-2.452 1.007-3.808-.021-.187-.161-.337-.345-.375l.001.027zM23.778.203c-.171-.169-.522-.089-.522-.089C22.621.04 21.98.003 21.339.001c-4.154-.043-8.153 1.576-11.106 4.497-.36.362-.7.742-1.02 1.139-1.402-.65-3.008-.709-4.455-.165-2.287.984-3.623 3.787-4.729 6.671-.087.224.025.476.249.562.144.055.304.031.425-.064 1.566-1.163 3.618-1.445 5.44-.749L5.6 13.856c-.05.184.026.377.187.479 1.466 1.096 2.767 2.395 3.863 3.857.103.163.298.239.482.188l1.963-.539c.719 1.826.436 3.893-.749 5.456-.148.188-.116.463.071.61.121.096.285.12.428.064 2.883-1.109 5.686-2.443 6.665-4.722.544-1.446.487-3.049-.161-4.451.395-.326.772-.672 1.133-1.036 3.381-3.44 5-8.241 4.392-13.026 0 0 .076-.352-.096-.524V.203zM21.339.87c.563 0 1.127.029 1.688.088.079.771.103 1.548.07 2.322-.611-.066-1.184-.34-1.623-.771-.438-.437-.713-1.009-.777-1.623.209-.011.422-.018.636-.018l.006.002zM10.846 5.112C13.262 2.716 16.438 1.24 19.828.94c.07.677.33 1.318.749 1.855l-2.698 2.697c-1.529-1.203-3.742-.939-4.946.59-1.005 1.278-1.005 3.078 0 4.356l-3.147 3.147c-.811-.785-1.689-1.498-2.626-2.131.662-2.394 1.932-4.58 3.686-6.342zm7.524 3.159c.001 1.469-1.188 2.66-2.657 2.66-1.469.002-2.659-1.188-2.66-2.656 0-1.47 1.189-2.66 2.657-2.661h.003c1.467 0 2.656 1.19 2.657 2.657zM1.314 11.269c.941-2.254 2.09-4.268 3.779-4.994 1.154-.428 2.428-.396 3.559.09C7.639 7.78 6.871 9.36 6.387 11.033c-1.645-.667-3.498-.581-5.074.233l.001.003zm8.891 6.19c-1.074-1.37-2.311-2.604-3.683-3.677l.395-1.434c1.845 1.275 3.444 2.874 4.722 4.718l-1.434.393zm7.508 1.425c-.727 1.698-2.737 2.848-4.989 3.789.811-1.578.893-3.432.225-5.074 1.677-.488 3.259-1.26 4.679-2.278.484 1.134.515 2.412.083 3.566l.002-.003zm-5.186-2.06c-.629-.937-1.34-1.816-2.123-2.628l3.147-3.148c1.528 1.203 3.743.939 4.945-.59 1.006-1.278 1.006-3.078 0-4.356l2.698-2.698c.535.418 1.177.677 1.85.75-.299 3.387-1.772 6.563-4.166 8.979-1.763 1.754-3.947 3.022-6.343 3.684l-.008.007zZ' fill='#f95b41'></path>
</svg>
</a>
</div>
– Langkah 4: Setelah itu copy kode berikut dan pastekan tepat diatas kode </body>.
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
// Show button after 100px
var showAfter = 100;
if ($(this).scrollTop() > showAfter ) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
//Click event to scroll to top
$('.back-to-top').hide().click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>– Langkah 5: Terakhir silahkan klik Simpan, selesai….
Penutup
Itu tadi cara membuat back to top dengan ikon roket di blogger. Nah sekarang penggujung web Anda tidak capek-capek untuk scroll keatas secara manual. Baiklah sekian artikel singkat ini selamat mencoba dan semoga bermanfaat.
