Status :

Cara Memasang Tombol Back To Top di Blogger

Ketika kita membuat posting yang panjang di blog Blogger maka kita menggunakan tombol scroll down dan kita mencapai bagian bawah Blog sekarang kita perlu menggunakan tombol scroll up untuk mencapai posting blog paragraf pertama, jadi kita membutuhkan tombol Back To Top, dengan default Blogger tidak memiliki tombol Kembali Ke Atas, sekarang kita dapat menggunakan tombol Kembali Ke Atas pihak ketiga di Blog kita.

Langkah Langkah


Langkah 1:Buka Blogger
Langkah 2:Kemudian klik Edit HTML
Langkah 3:Sekarang temukan  <head> di HTML kalian Kemudian Paste Kode HTML Ini Di Bawahnya.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 
Langkah 4:Setelah menempelkan kode ini sekarang Temukan]]> </ b: skin>Dan Tempelkan CSS yang diberikan di atasnya.
.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;
}
Langkah 6:Sekarang Temukan </body> Kemudian tempel tag jQuery Di Atas </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 kalian ingin Bounce Effect di scrolling Kemudian Paste ini berikan jQuery Di Atas </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>

penutup

sekian cara Memasang Tombol Back To Top di Blogger semoga bermanfaat.

Baca juga :
Utamakan ngopi pagi hari,, karna hidup butuh inspirasi bukan caci maki... | Blogger | pelajar | Yo..|

Posting Komentar

© Alfatechnesia. All rights reserved. Distributed by zidarma