Cara Mudah Membuat Tombol Back To Top di Blog - Otak Kita

Cara Mudah Membuat Tombol Back To Top di Blog



Otak Kita - Cara Mudah Membuat Tombol Back To Top di Blog, membuat tombol back to top dengan efek bounce maupun dengan css, back to top atau yang biasa kita sebut tombol ke atas atau tombol scroll ke atas , ini dapat kita pasang di blogger pada menu "Edit HTML" Pertanyaan nya "Apa sih fungsi tombol back top top ini sendiri untuk para pengguna blogger?"Ya, perlu sobat ketahui fungsi dari tombol back to top ini di blog.Sebagai langkah cepat atau sebuah menu navigasi saat kita membaca artikelyang panjang tentunya kebawah bukan? otomatis sobat akan kembali lagi ke atas menggunakan keyboard atau mouse maupun scroll up.

 Dengan adanya tombol back top top ini pada blog sobat, akan memudahkan pengguna (Audiens) juga sobat sebagai pemilik blognya. Secara, dengan sekali klik saja sobat sudah otomatis ke halaman content atas artikel tanpa ribet - ribet menggunakan mouse dan jari tangan sobat

Tombol yang satu ini sangatlah simple tapi manfaatnya banyak, Jika sobat mau memasang
tombol back to top ini, silahkan ikuti langkah - langkahnya dibawah ini!

Cara Mudah Membuat Tombol Back To Top di Blog

Langkah 1 : Sobat Login ke akun Blogger - Template - Edit HTML - Kemudian Sobat
Letakan kode dibawah ini tepat sebelum

Langkah 2 : </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah 3 : </style>
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#22A7F0;
    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 4 : </body>
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-angle-double-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>

Langkah 5 : Kalau sudah semua, Sobat hanya perlu Simpan perubahan template dan lihat

hasilnya

Gimana keren bukan :D , nah itulah tutorial simple nya dalam membuat back to top di blogger sangatlah mudah dan tricky sekali , semoga bermanfaat ya untuk sobat semua
Salam Blogging,

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel