Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger
Cara Memasang / Membuat Tombol Back to Top (Kembali ke Atas) di Blogger.

BERIKUT ini Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger.

Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik atau satu sentuhan (tap).

Tombol kembali ke atas ini baur muncul dikala halaman discroll ke bawah.

Tombol kembali ke bab paling atas halaman ini menjadi salah satu trending desain web/blog yang harus diikuti sesuai dengan prinsip "pengalaman pengguna" (user experience).

Cara gampang memasang tombol kembali ke atas

1. Layout/Tata Letak > Add a Gadget/Tambah Gadget
2. Pilih HTML/Javascript
3. Copas instruksi berikut ini:

<!--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: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt=" Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger" / ></a>
<!--Smooth Back to Top Button End-->

4. Save!

Beres. Kini blog Anda sudah ada tombol back to top.

Cara Lain
Berikut ini cara lain pemasangan tombol ke atas di blog Anda.

Pasang Kode CSS
Simpan di atas instruksi ]]></b:skin>

#myBtn {display:none;position: fixed;bottom: 20px;right:30px;z-index:99;border:none;outline:none;background-color:#357ae8;color: white;cursor: pointer;padding: 15px;border-radius: 10px;font-size:20px}
#myBtn:hover {background-color: #555;}

Pasang Kode HTML
Simpan di atas instruksi </body>

<button onclick="topFunction()" id="myBtn" title="Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>

Pasang Kode JavaScipt Kembali ke Atas
Simpan di atas instruksi

<script type='text/javascript'>
//<![CDATA[
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0; // For Chrome, Safari and Opera
    document.documentElement.scrollTop = 0; // For IE and Firefox
}
//]]>
</script>

KODE LAINNYA. Best! Recommended!

HTML & JS:
Pasang di atas instruksi </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</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>

CSS:
Pasang di atas instruksi ]]></b:skin>

#back-to-top {
background:#000000;
color:#ffffff;
padding:8px 10px;
font-size:24px;
border-radius: 22px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}


PENTING!
Link ke Awesome Font
Pastikan di template blog Anda sudah terpasang Link ke Awesome Font di atas instruksi </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Demikian Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger. Good Luck! (www.idtutorial.com).*


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours