Cara Memasang Back to Top untuk Blogger Ringan Responsive

Baca Juga

Cara Memasang Back to Top Keren untuk Blogger. Ringan & Responsive. Terbaik!

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

Berikut ini cara memasang tombol back to top di blog Blogger. Kode tombol kembali ke atas inilah yang dipasang di blog CB.

1. Klik Tema > Edit HTML
2. 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'/>

Jika belum ada, pasang dong! Copas kode tersebut di atas kode </head>

3. Kode CSS Back to Top

Pasang kode berikut ini 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}

4. Kode JavaScript Back to Top

Pasang kode berikut ini 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() &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>

Cara Lain Memasang Back to Top untuk Blogger

Berikut ini Cara menampilkan tombol back to top di blog Blogger tanpa edit HTML. Dipasang di Tata Letak > Widget/Gadget.

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. Klik Layout > klik 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/AVvXsEgocMWCcTTcPj955KetdUhbi3lGDoKagBpjrSAn0LHl-biGfka74ctaniRds70gYBvGNGWZP8sfaSGdLv3dJMgBvWpD4bOyROmJLmqLKNZqZiR3E775vZ_sk__LDC9jR2AR3wbvvyGthJD6/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/AVvXsEgcCf8Avi86vOEWxafjYXW-M9UKVjaXQLNFNZW5puOcxLGj99RsYfAO0JitpvXoKHeZqDeLh_3r1QMdu5uqmI1ReJjQUU4cksgEDiLVAIG0xFr7mvCrQsKGgVmA81LdzbqPNRyptKTW6BA/s50/back+to+top+button.gif

4. Save!

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).*