BannerFans.com
Memasang Smooth Back To Top di Blog

Memasang Smooth Back To Top di Blog

Senin, Januari 12, 2015
Memasang Smooth Back To Top di Blog - Mungkin sudah banyak bertaburan di internet tentang tutorial cara memasang tombol back to top di blog dan kali ini saya akan berbagi tips mengenai tutorial tersebut.
Memasang Smooth Back To Top di Blog



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. Log in ke Blogger Anda.
2. Buka Dashboard > Pilih Template > Pilih Edit HTML, simpan kode di bawah ini setelah <head> atau sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

 Jika di template anda sudah terpasang Fontawesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya.

3. 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>

5. Setelah itu Simpan Template dan Lihat hasilnya.

Info

Terima Kasih Sebelumnya Kepada Pembaca Artikel Media Impressive, Bilamana Ada Yang Kurang Mengerti Didalam Artikel Diatas, Tanyakanlah Di Kolom Komentar. Dan Bagi Anda Yang Ingin MengCopy Paste Artikel Media Impressive Diharapkan Menyertakan Sumber.

Next
« Prev Post
Previous
Next Post »

PERATURAN BERKOMENTAR :

√ Berkomentarlah Sesuai Artikel Diatas
√ Berkomentarlah Menggunakan Bahasa Yang Jelas
√ Relevan
√ Sopan
Θ SPAM
Θ Link Aktif (Live Link)
Θ Promosi (Iklan)
Θ OOT (Out Of Topic)

Langganan: Posting Komentar (Atom)
BannerFans.com
' type='text/javascript'/>