Cara Membuat Tombol Back To Top Pada Blog

Back To Top adalah tombol otomatis untuk kembali ke atas halaman sebuah blog / website sesuai dengan namanya, agar mempermudah pembaca atau pengujung kembali keatas pada artikel yang sedang di bacanya, tidak perlu menggeser scroll pada mouse cukup dengan klik 1x maka secara otomatis akan kembali di bagian atas halaman tersebut. Menurut saya lebih baik nya kalau di pasang tombol Back To Top, karena Back To Top juga termasuk salah satu User Friendly pada blog / website.

Bila anda minat untuk memasang tombol Back To Top pada blog anda, saya akan berbagi sidikit pengalaman, kode HTML nya dan cara penerapannya, tidak begitu susah, hanya dengan menambahkan beberapa kode HTML Back To Top. Berikut ini langkah – langkah Cara Membuat Tombol Back To Top Pada Blog seperti tombol Back To Top yang saya pasang pada blog saya saat ini.

• Yang pertama seperti biasa kalau lagi sedang edit tema pada blog adalah: Masuk ke Blogger.
• Kemudian pilih menu Tema yang dulu nya adalah Template.
• Selanjutnya pilih Edit HTML kemudian anda cari kode ]]></b:skin> kemudian copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>.

/* Back To Top */
#back-to-top{
background:#ff6600;
color:#ffffff;
border-radius: 2px;
padding:8px 10px;
font-size:22px
}
#back-to-top{
position:fixed!important;
position:absolute;
bottom:20px;
right:20px;
z-index:999
}
#back-to-top:hover {
    background-color:#ff2200;
}

• Kemudian letakan di bawah ini tepat di bawah kode </head>.

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

• Kemudia letakan kode di bawa ini tepat 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>

• Yang terakhir Simpan Tema anda dan lihat hasilnya.

Kurang lebih nya seperti di atas untuk  Cara Membuat Tombol Back To Top Pada Blog langkah – langkahnya saat saya menerapkan tombol Back To Top pada blog saya. Semoga bermanfaat bagi yang membutuhkannya, termikasih,...