Membuat Tombol Back To Top di Blogger

Tombol Back To Top cukup penting, karna dapat mempermudah pengunjung kembali ke atas tanpa harus scrull mouse, touchpad dll.

Cara Membuat Tombol Back To Top

Pertama pastikan pada template sudah ada kode JQuery seperti dibawah ini

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

atau

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

atau ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

Jika belum copy salah satu diatas kode </head>

Lanjut kebagian css Back To Top copykan ini diatas ]]></b:skin atau </style>

/* back to top */
#back-to-top {

  background:#2560AA;

  color:#ffffff;

  padding:8px 10px;

  font-size:24px;

}
.back-to-top {

  position:fixed !important;

  position:absolute;

  bottom:20px;

  right:20px; z-index:999;

}

Dan paste scrypt dibawah 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>

Dan sebagai tambahan karna kode diatas menggunakan icon dari font awesome
paste juga kode dibawah diatas <b:skin>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Untuk icon bisa diganti sesuai selera masing masing pada bagian yang ditandai warna merah diatas.

Tweet