SALAH satu klien Layanan Premium CB Blogger minta dipasangkan tombol kembali ke atas (Back to Top Button) yang smooth menggunakan jQuery.
Tombol Back to Top untuk Blogger ini muncul saat halaman discroll ke bawah. Posisinya juga di samping kanan bawah, sehingga tidak mengganggu halaman.
Back to Top merupakan bagian dari trend desain website/blog karena user friendly, yaitu berfungsi memudahkan pengunjung kembali ke halaman bagian teratas dengan satu klik, tidak mestik scroll atau "usap layar" (HP). Tinggal klik, maka halaman otomatis kembali ke atas.
Berikut ini salah satu kode Tombol Back to Top sebagaimana dishare vktechzone. Penampakananya seperti dalam ilustrasi. Live Demo
Cara Pasang Kode Back to Top di Blogger
1. Pastikan blog Anda sudah dipasang link ke jQuery, seperti ini:<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>Jika belum ada, maka pasang kode tersebut di atas kode </head>
2. Layout > Add a Gadget > pilih HTML/JavaScript
3. Copas kode berikut ini di kolom content:
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbE9yWfM-ocbGZrOAu5uVQoRQ2S7nmkfPlLQZVxEcnzGwqnmnu1WODx45ba8TNCjk-ax5kwXLR3tlkph_HnvkFTQW9Og8OHMWi85xUOJs8Xd2gWqhyphenhyphenEPtvhn1vYdjfHwDTM6pDcewak4jg/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->
Jika mau gambar panah seperti blog CB, ganti kode gambar warna merah di atas dengan link gambar berikut ini:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqePv406LBWE06thuIQO8en-YYnaq4Od6YZkLa6JzjzOQZxCRUuuc8k58gsLHgKupyuyXfGfXrYEMinio1Mrzv09HTixfUuuxZoEUy294ArXgv_LVxNgNwkuB7oWTh6psxYy7iI8tDdk/s50/back+to+top+button.gif
4. Save!
Back to Top yang Dipasang di Blog CB
Berikut ini kode tombol kembali ke atas yang dipasang di blog CB. Pastikan ada link ke awesome font di atas kode </head> seperti ini:<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Kode CSS
Pasang di atas kode ]]></b:skin>
#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px}
.back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
Kode JavaScript Back to Top
Pasang di atas kode </body>
<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</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>
Demikian Cara Memasang Back to Top untuk Blogger. Masih banyak desain atau cara lain memasang Back to Top.
Good Luck & Happy Blogging! (www.contohblog.com).*
