Tutorial cara pasang Tombol Back To Top Rensponsive blog
Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis.
Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda.
Oke! Kita Langsung saja kita menuju tutorial berikut ini
Cara Memasang Tombol Back To Top Rensponsive Keren
Tutorial cara pasang Tombol Back To Top Rensponsive blog
/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>
<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>3. Terakhir simpan template dan lihat hasilnya.
Cara Memasang Tombol Back To Top Rensponsive Ringan :
Peranan dan fungsi dari tombol back to top sendiri cukup penting yaitu memberikan kemudahan bagi pengunjung yang ingin mengscroll halaman kembali ke atas dengan hanya mengklik satu tombol.Catatan : Jika di template sudah ada tombol back to top, silahkan hapus terlebih dahulu.
Berikut cara pemasangannya :
1. Login ke Blogger Dashboard > pilih blog > pilih Template > kemudian klik Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.
2. Simpan CSS di bawah ini sebelum ]]></b:skin> atau </style>
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}3. Simpan jQuery dan HTML di bawah ini sebelum </body>
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>4. Setelah itu simpan template dan lihat hasilnya.
Dengan tambahan efek bounce
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>Untuk setingan warna dan lainnya bisa anda edit kembali sesuai selera,
Posting Komentar untuk "Tutorial cara pasang Tombol Back To Top Rensponsive blog"
Posting Komentar
Terimakasih sudah berkunjung ke blog sederhana ini, semua komentar dan saran yang membangun, akan dijadikan pertimbangan untuk perbaikan isi blog dan pengembangan materi blog dimasa mendatang. salam du-ki.com