Cara Memasang Bounce Back To Top di Blog - Apa kabar, sobat Tutorialku? Dihari ini kita bertemu lagi diblog saya yang simple ini untuk membaca artikel-artikel ataupun tutorial. Pertama-tama saya ingin mengucapkan Terima Kasih Untuk anda yang telah setia mengunjungi dan membaca artikel saya diblog Semua-Tutorilaku ini. Semoga dapat bermanfaat. :)
Cara Memasang Bounce Back To Top di Blog - Seperti pada Judul artikel saya kali ini yaitu Cara Memasang Bounce Back To Top di Blog, kita akan membahas bagaimana Cara Memasang Bounce Back To Top di Blog. Sebenarnya telah banyak tutorial ini di Internet tentang Cara Memasang Bounce Back To Top di Blog, dan kali ini saya akan berbagi tips tutorialnya untuk anda.
Untuk fungsi dari Tombol Back to Top ini saya rasa anda semua sudah tahu, yaitu untuk memberikan kemudahan bagi pengunjung blog kita yang ingin mengscroll halaman kembali ke atas hanya dengan mengklik satu tombol.
Note: Jika di Template anda telah ada Tombol Back To Top, Silahkan dihapus dulu.
Berikut adalah Cara Memasang Smooth Back To Top di Blog
1. Login ke Blogger Dashboard > Pilih Template > Lalu Edit HTML. Lalu simpan kode diawah ini setelah tag <head> atau bisa juga sebelum </head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> Note: Jika didalam Template anda telah terpasang FontAwesome diatas, Abaikan langkah pertama dan langsung lanjutkan saja kelangkah berikutnya. :)
2. Simpan kode CSS dibawah ini sebelum tag ]]></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. Simpa kode jQuery dan HTML dibawah ini sebelum tag </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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script> 4. Setelah itu Simpan Template dan lihat hasilnya. :)
Untuk Demo anda bisa lihat dan coba sendiri diblog saya ini, karna saya juga menggunkan Tombol Back to Top yang satu ini. :) Semoga Bermanfaat.
Tidak ada komentar untuk *Cara Memasang Bounce Back To Top di Blog!
Silahkan berkomentar sesuai topik artikel diatas dan jangan buang waktu anda hanya untuk membuat komentar SPAM disini.