Cara Pasang Tombol Kembali Ke Atas Back To Up Di Blog Dengan Elastis Halus

Cara Memasang Tombol "Kembali Ke Atas" Di Blog - Dalam tutorial hari ini, aku akan bagikan cara menambahkan tombol kembali ke atas atau bahasa lainnya back to up di blog blogger dengan bergulir mulus elastis dan halus dengan mudah. Tombol yang aku bagikan ini terlihat di kanan bawah halaman .

Jika blog teman mempunyai banyak kata kata isu yang banyak pastinya capek menscroll mouse ke atas maupun ke bawah, dengan menambahkan widget back to up ini di blog supaya ketika menuju di halaman atas blog menjadi gampang tidak menscroll dengan mouse secara manual.

Mari kita mulai tutorialnya.

Cara Membuat Tombol Back To Up di blog 

1. Untuk menambahkan tombol Kembali ke Atas di blogger, cukup arahkan ke Dasbor Blogger > Template > Edit HTML dan Cari arahan ]]> </ b: skin> .

2. Sekarang salin arahan CSS di bawah dan tempelkan sempurna sebelum kode ]]></b:skin> .

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}

3. Sekarang, cari tag </ body> di template Anda salin dan pastekan arahan di bawah ini sebelum tag </ body>.

<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() &gt;= 50) {        
        $(&#39;#return-to-top&#39;).fadeIn(200);  
    } else {
        $(&#39;#return-to-top&#39;).fadeOut(200);   
    }
});
$(&#39;#return-to-top&#39;).click(function() {     
    $(&#39;body,html&#39;).animate({
        scrollTop : 0                      
    }, 500);
});
</script>

4. Terakhir, Simpan template Anda dan lihat hasilnya.

Jadi, ini yakni tutorial gampang cara menambahkan tombol kembali ke atas di blog anda maupun blogger yang masih blogspot. biasanya cara ini sanggup menyesuaikan arahan ini dengan gampang di template, tetapi bila Anda pemula gunakanlah dari arahan default saja.

Kalau ada duduk kasus ketika menginstal widget ini, aku harap tanyakan pada kotak komentar di bawah supaya aku perbaharui isi isi arahan yang masih tidak cocok ataupun memakai alternative lain untuk pasang tombol back to up yang lebih sederhana.

Cukup hingga di sini semoga banyak membantu anda menciptakan blog.