Membuat Tombol Kembali Ke Hamalan Atas Di Blog


Tombol Back to Top berfungsi untuk memudahkan pengunjung untuk kembali kebagian atasdari suatu halaman. Tombol Back to Top nantinya akan terlihat di pojok kanan bawah apabila pengunjung mengarahkan scrollnya kehalaman bawah pada Blog Anda. Untuk yang ingin membuat tombol back to top atau tombol kembali ke atas menggunakan Jqueryversi 1.4.3, silahkanikutilangkahberikutini.
1. Login ke Blogger > Edit HTML
2. Carikode ]]></b:skin>
3. Letakkankodeberikutini di ataskode ]]></b:skin>

#toTop {
    width:70px;
        border:1px solid #ccc;
        background:#f7f7f7;
        opacity:0.8;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}
4. Kemudiancarikodepenutup </head> lalupasangkodeberikut di ataskode</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });   
});
</script>
5. Setelahitucarilagikode </body> danpasangkodeberikut di atas</body>

<div id="toTop">Kembali</div>
6. Save template dan lihat hasilnya.
Membuat Tombol Kembali Ke Hamalan Atas Di Blog Membuat Tombol Kembali Ke Hamalan Atas Di Blog Reviewed by Arif Pujangga on 05.03 Rating: 5

1 komentar: