Membuat Tombol Back to Top dengan CSS & HTML Entities

Tombol back to top, biasanya dipergunakan oleh penulis blog yang memiliki artikel yang lumayan panjang untuk memudahkan pengunjung kembali ke bagian atas halaman tanpa perlu menggeser scroll bar web browser nya. Dan melalui artikel kali ini saya akan memberikan tutorial membuat tombol back to top menggunakan HTML Entity, tanpa gambar dan tanpa jquery dengan harapan tidak menambah atau memberatkan waktu loading halaman.

Cara membuat tombol back to top

Yang akan kita pergunakan untuk memperjelas fungsi tombol adalah kode HTML arrow ⇑ yang akan ditampilkan menjadi ⇑ , bagi anda yang belum mengetahui apa itu HTML entity, silahkan anda baca terlebih dahulu sentuhan seni dengan HTML Entities

Mari menuju ke tutorial.

CSS back to top button

Pertama tama kita akan namai tombol yang akan kita buat kali ini, sebagai bukti cinta kita pada produksi Indonesia, kita namai tombol ini "atas". Berikut standar kode untuk membuat tombol back to top,

<div class="atas"><a href="#" title="Back To Top">&#8657;</a></div>

Anda bisa mengganti tulisan back to top dengan kembali ke atas atau lainnya.

Saatnya memberikan make up untuk tombol tersebut.

Pertama-tama kita akan memberi background dan bentuk pada tombol tersebut,

.atas {background-color:#fff;font-size:2em;font-weight:bold;border:2px solid #333;display:inline;padding:6px}

dengan kode tersebut saya memberi latar belakang warna putih (#fff) dengan ukuran panah sebesar 2em dan border sebesar 2px solid, bentuknya jadinya akan seperti ini :



agar lebih terlihat sebagai sebuah button, saya akan membuatnya bulat dengan menambahkan -webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; , kode lengkapnya menjadi

.atas {background-color:#fff;font-size:2em;font-weight:bold;border:2px solid #333;display:inline;padding:6px; -webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; }

dan hasilnya



Karena tombol tersebut adalah sebuah link, kita akan menghilangkan garis bawah dari tautan tersebut, dan untuk mempercantik tampilannya, kita buat tombol tersebut menonjol, berikut kode nya

.atas {
background-color:#fff;
font-size:2em;
font-weight:700;
border-left:2px solid #333;
box-shadow:2px 2px 4px #000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
display:inline;
padding:6px;
}

.atas a {
color:#333;
text-decoration:none;
border-left:1px solid #555;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
box-shadow:2px 2px 4px #000;
}

dan hasilnya



kemudian kita tambahkan efek tertekan pada tombol tersebut saat dilalui oleh pointer dengan menambahkan

.atas:hover {
border:1px solid #555;
box-shadow:2px 2px 4px transparent;
}

maka tombol back to top pun telah selesai kita buat, tinggal menambahkannya di blog anda.

Kita menuju ke menu template blog anda kemudian anda pastekan kode berikut di atas tag ]]></b:skin>

.atas {position:fixed;left:3%;bottom:10%; 
background-color:#fff;
font-size:2em;
font-weight:700;
border-left:2px solid #333;
box-shadow:2px 2px 4px #000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
display:inline;
padding:6px;
}
.atas a {
color:#333;
text-decoration:none;
border-left:1px solid #555;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
box-shadow:2px 2px 4px #000;
}
.atas:hover {
border:1px solid #555;
box-shadow:2px 2px 4px transparent;
}

perhatikan ada kode yang saya warnai merah diatas adalah sebuah perintah agar tombol tersebut melayang atau floating di sebelah kiri(left) dengan jarak 3% dan di bawah(bottom) dengan jarak 10%, anda dapat menyesuaikannya dengan memindahkannya ke kanan dengan mengganti left dengan right, begitupun bottom dengan top.

Kemudian tambahkan kode berikut di atas kode </body>

<div class="atas"><a href="#" title="Back To Top">&#8657;</a></div>

Simpan template anda, dan lihat hasilnya di blog anda, silahkan anda hover untuk melihat efeknya, atau klik untuk melihat gerakan kembali ke atasnya.

Semoga tutorial membuat tombol back to top yang saya tulis bermanfaat, satu tambahan komentar dari anda atau bantuan share artikel ini melalui tombol share di bawah amat sangat saya hargai, terima kasih.

Artikel Membuat Tombol Back to Top dengan CSS & HTML Entities ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;