Cara Memasang Tombol "Kembali Ke Atas" Di Blog - Dalam tutorial hari ini, saya akan bagikan cara menambahkan tombol kembali ke atas atau bahasa lainnya back to up di blog blogger dengan bergulir mulus lentur dan halus dengan mudah. Tombol yang saya bagikan ini terlihat di kanan bawah halaman .
Jika blog sobat memiliki banyak kata kata informasi yang banyak pastinya capek menscroll mouse ke atas maupun ke bawah, dengan menambahkan widget back to up ini di blog agar saat menuju di halaman atas blog menjadi mudah tidak menscroll dengan mouse secara manual.
Mari kita mulai tutorialnya.
Cara Membuat Tombol Back To Up di blog
1. Untuk menambahkan tombol Kembali ke Atas di blogger, cukup arahkan ke Dasbor Blogger > Template > Edit HTML dan Cari kode ]]> </ b: skin> .
2. Sekarang salin kode CSS di bawah dan tempelkan tepat sebelum kode ]]></b:skin> .
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 10px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
}
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 10px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
}
3. Sekarang, cari tag </ body> di template Anda salin dan pastekan kode di bawah ini sebelum tag </ body>.
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
</script>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
</script>
4. Terakhir, Simpan template Anda dan lihat hasilnya.
Jadi, ini adalah tutorial mudah cara menambahkan tombol
kembali ke atas di blog anda maupun blogger yang masih blogspot. biasanya cara
ini dapat menyesuaikan kode ini dengan mudah di template, tetapi jika Anda
pemula gunakanlah dari kode default saja.
Kalau ada masalah saat menginstal widget ini, saya harap
tanyakan pada kotak komentar di bawah agar saya perbaharui isi isi kode yang
masih tidak cocok ataupun menggunakan alternative lain untuk pasang tombol back
to up yang lebih sederhana.
Cukup sampai di sini semoga banyak membantu anda membuat
blog.
