Tampilkan postingan dengan label Script HTML Cara Membuat Back To Top di Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Script HTML Cara Membuat Back To Top di Blogspot. Tampilkan semua postingan

Script HTML Cara Membuat Back To Top di Blogspot

Script HTML Cara Membuat Back To Top di Blogspot | Untuk memudahkan kembali keatas. Maka ada kode yang dibutuhakan yang diterapkan di template blogspot kita. berikut ini adalah langkah langkah selengkapnya:

Script HTML Cara Membuat Back To Top di Blogspot

Pertama kita pasang dulu css font awesome , karena back to top ini menggunakan font awesome.
Caranya pasang kode javascript berikut dan letakan diatas kode </head>

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

Kemudian pasang css dibawah ini tepat diatas ]]></b:skin> atau </style>

/* Back To Top */ #back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

Setelah itu kita panggil back to topnya dengan memasang html dan javascript dibawah ini dan letakan diatas kode </body>
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>         
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>
Terkahir simpan Template dan lihat hasilnya

Catatan;
background:#E73037 Silahkan ganti warnanya dengan melihat kodenya DISINI sebagai contoh #0b366b adalah kode yang warnanya seperti gambar back to top di artikel ini.

Sumber: Masyadi