Memasang Widget Back To Top Dengan Efek Keren - Sejak zaman Template Responsive bermunculan selain banyak orang tertarik dengan tampilan template tersebut , terdapat berbagai widget yang diperlukan untuk melengkapi tampilan dari berbagai desain dari Blog yang diperlukan. Salah satunya adalah Widget Back To Top atau dalam Bahasa Indonesia bisa disebut dengan "Kembali ke Atas" atau "Menuju ke Atas".
Sedangkan peranan dan fungsi dari widget ini adalah memudahkan para pengunjung blog untuk mengscroll ke halaman atas artikel suatu blog tanpa harus menggunakan scrool bar maupun keyboard. Kelebihan dari widget ini adalah hanya dengan satu kali klik kita bisa langsung menuju halaman atas suatu artikel.
Berikut cara pemasangan Widget Back To Top :.
Back To Top Style 1.
1. Login ke Akun Blogger Sobat.
2. Pada Dasbor klik Template.
3. Klik Menu Edit HTML.
4. Simpan kode berikut diatas atau dibawah </head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Jika di template sobat sudah ada Kode diatas abaikan saja cara berikut hehehe...
5. Pastekan CSS berikut 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;
}
6. Setelah itu Simpan kode dibawah 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>
Jika Sobat menginginkan Widget Back To Top dengan efek bounce atau memantul silahkan ganti kode diatas dengan kode berikut..
<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>
