Cara Buat Tombol Back To Top Satu Menit

Cara buat tombol back to top satu menit

Tombol back to top sangat dibutuhkan untuk tombol navigasi pada blog, apalagi pada halaman yang postingannya sangat banyak dan panjang.

Mungkin ada beberapa blog yang belum mempunyai tombol back to top, atau yang biasanya download template gratisan yang belum ada fasilitas ini maka bisa ditambahkan tombol back to top sebagai pelengkap.

Sebagian orang yang membaca halaman blog pasti akan mencari tombol ini jika sudah membaca halaman paling bawah dan ingin kembali pada halaman paling atas.

Kalau tombol ini tidak ada maka pengunjung akan kesulitan dan rasanya sangat malas untuk menggunakan scroll yang ada pada bawaan gadget masing-masing karena agak lama berjalannya.

Berbeda dengan menggunakan tombol back to top sekali sentuh saja otomatis langsung dibawa menuju halaman atas.

Semua pasti sudah tau fungsinya jadi gak banyak bicara langsung saja copy Kode di dalam kotak ini

1.)

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

Kemudian letakkan/ pastekan di atas tanda ]]></b:skin>

Catatan:

- background:#333 (ganti warna background sesuai selera kalian).

- color:#fff (ganti warna font-awasome tanda panah ke atas)

- Padding:8px 10px (ini untuk menyesuaikan lebar tombol, mau dibuat persegi (8px 10px) atau persegi panjang (8px 20px).

- Font-size:24px (ukuran untuk font awasome tanda panah ke atas)

- bottom:10px (jarak tombol dengan bar bawah pada gadget)
- right:30px (jarak samping kanan tombol dengan bar kanan gadget)

Jika ingin menambahkan efek hover taruk kode di bawah ini di dalam kode css nomer 1

#back-to-top:hover{background:#fff; color:#1E90FF}

(background:#fff : warna background. color:#1E90FF : warna font awasome tanda panah ke atas)

Letakkan saja kodenya di tengah-tengah seperti ini:
#back-to-top {
background:#333;
color:#fff;
padding:6px 8px;
font-size:22px;}

#back-to-top:hover{background:#fff; color:#1E90FF}

.back-to-top {
position:fixed !important;
position:absolute;
bottom:10px;
right:30px;
z-index:999;}

Bagi yang punya template resposive bila ada settingan untuk media only screen and (max-width:640px) / untuk ukuran layar sekelas hp android maka ubah suaikan ukurannya untuk hp, pastekan juga kode yang nomer 1 ke dalam setting css untuk ukuran screen hp.

kalau saya menggunakan ukuran ideal untuk hp adalah:

#back-to-top {

background:#333;

color:#fff;

padding:8px 10px;

font-size:18px;

}

.back-to-top {

position:fixed !important;

position:absolute;

bottom:10px;

right:10px;

z-index:999;}

}

Yang perlu dirubah yang bertanda biru, dan lainnya biarkan saja.

Selanjutnya copy kode berikut:

2.)

<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() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

Letakkan/ pastekan di atas tanda </body>

Tanda </body> biasanya letaknya berdekatan di atas tanda penutup </html> kalau belum ada kode-kode lain yang di tambahkan seperti script widget yang di pasang pada blog, kalau punya saya letaknya pas di atas tanda </html> jadi seperti ini

</body>

</html>

kalau kesulitan mencari posisi yang benar cari saja tanda penutup dari elemen footer.

Seperti ini tandanya:
</footer>

</div>

Letakkan kode tadi tepat di bawah </div>

Kemudian save. Lihat hasilnya,,, mudah bukan! hanya cukup satu menit,,hehehey

Terimakasih...
Jangan lupa comment bray,, biar tambah saudara... okey