Cara Memasang Back To Top Button di Blog

Cara Memasang Back To Top Button di Blog

Back To Top Button atau lebih dikenal Tombol Back To Top kini sudah banyak digunakan blogger maupun webmaster. Fungsi dari tombol ini adalah untuk memudahkan pengunjung untuk kembali ke halaman paling atas tanpa perlu scroll mouse.

Tutorial mengenai cara memasang tombol back to top pun juga banyak di luar sana. Tetapi setelah saya lihat, kebanyakan tutorial di luar sana memberikan trik yang cukup ribet, menggunakan javascript eksternal yang pastinya akan menambah load time blog, dan menggunakan gambar untuk tombolnya. Trik semacam itu sangat tidak disarankan.

Kali ini saya juga akan memberikan trik mengenai cara memasang tombol back to top, namun dengan cara pemasangannya yang berbeda. Hasilnya? sama saja. Untuk demo tombol back to topnya dapat Anda lihat pada blog ini.

Cara Memasang Back To Top Button di Blog

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode pemanggil link font awesome di bawah ini di atas kode </head>

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

Jika blog Anda sudah memiliki script Font Awesome, maka lewati langkah ini.

3. Pastikan pada template Anda terdapat jQuery library seperti berikut ini, yang letaknya di atas kode </head>.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Jika sudah ada (versi berapapun) tidak perlu Anda tambahkan lagi, karena pada template tidak boleh lebih dari 1 jQuery library. Jika belum Ada silahkan letakkan kode tersebut di atas kode </head>

4. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin>

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

4. Kemudian letakkan kode HTML dan JQuery di bawah ini di atas 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>

5. Simpan Template dan lihat hasilnya.

Tampilan tombol back to top ini mirip dengan tombol back to top pada template Evo Magz milik mas sugeng. Untuk melihat hasilnya Anda dapat melihat tombol back to top di pojok kanan bawah blog Anda. Semoga bermanfaat~

Leave a Reply