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 :

tombol back to top

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

back to top button

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

css back to top button

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.
al ghifari
Artikel Membuat Tombol Back to Top dengan CSS & HTML Entities ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
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 ;

9 comments

2/23/2013 11:52:00 AM

terimakasih mas udah berbagi informasi nya.

2/27/2013 01:31:00 PM

share ilmunya bermanfaat banget gan,terimakasih banyak atas infonya,salam persahabatan

2/27/2013 04:10:00 PM

wah..
komplit tutornya.. :D
harus banyak belajar nih, saya.. :))

2/28/2013 12:25:00 AM

Urgent !!! gan gua mau request post nih, please sobat postingin cara membuat bar menux jadi bertingkat contoh :di atas pada blog agan di bagian "menu bar" sobat ada tulisan modifikasi blog saya ingin ketika saya melintaskan cursor mouse saya di bagian itu muncul sub menux itu cuma contoh saya mau nerapinnya di blog saya mohon bantuannya sob. thanx

2/28/2013 04:41:00 AM

@kunio Diablo horizontal menu dropdown sobat? silahkan,
http://theseoart.blogspot.com/2013/02/cara-membuat-horizontal-menu-dropdown.html

2/07/2015 03:20:00 PM

mantap dah artikelnya kawan
http://acemaxs31.com/obat-herbal-gagal-jantung/

2/18/2015 02:05:00 PM

keren artikelnya gan

2/21/2015 09:53:00 AM

nice artikelnya :)
http://jellygamatgoldg31.com

3/04/2015 09:55:00 AM

wah keren artikelnya gan

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO