Antara Border Bottom dan Underline pada Link di Dalam Posting
Pranala, link, atau tautan yang terletak di dalam posting pada dasarnya harus dengan mudah dikenali oleh pembaca. Untuk mendukung hal itu, umumnya link tersebut disetel bergaris bawah (underline). Ada juga yang menggunakan setelan batas bawah alias border bottom. Tentunya selain diberi warna khusus (biasanya biru).
Pertanyaannya, setelan manakah yang lebih baik?
Kebanyakan saya amati menggunakan garis bawah. Contoh kode CSS yang biasa digunakan misalnya
a{text-decoration:underline}
Arti kode di atas :
Teks yang disisipkan link akan diberi dekorasi/efek bergaris bawah.
Jarang sekali yang menggunakan setelan batas bawah, dimana kode CSS yang digunakan contohnya seperti berikut ini (diambil dari blog saya)
div.post-body a:link{color:#071585; border-bottom:1px solid #666}
Arti kode di atas :
Untuk link di dalam tubuh/area posting diberi warna biru (dengan kode HTML berupa #071585) dan diberi batas bawah berupa garis solid sebesar 1 pixel berwarna abu-abu (yang kodenya #666).
Untuk huruf tertentu seperti g, j, p, q, dan y – penggunaan batas bawah (border-bottom) menurut saya memberikan efek tampilan yang lebih baik. Batas bawah tidak akan memotong kaki pada huruf g, j, p, q, dan y. Ia sekadar menyentuh ujung kaki kelima huruf tersebut.
Beda dengan efek yang dihasilkan oleh underline (garis bawah). Ia akan memotong kaki huruf g, j, p, q, dan y. Nah, silakan tafsirkan sendiri, mana yang menurut Anda lebih baik dari sisi tipografi?
Untuk blog ini, saya lebih memilih efek border-bottom untuk link di dalam area posting dan juga pada area komentar. Untuk area sidebar? Sengaja tidak saya setting bergaris bawah atau berbatas bawah. Tapi bukan tidak mungkin suatu saat akan saya samakan setelannya dengan area posting.
Bagaimana dengan blog Anda?
Menu Lainnya »» Atas » Depan » Arsip » Kontak » Bawah
Add KafeGue di Facebook 
Follow KafeGue di Twitter
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Menuju Posting Terbaru
Posting Terkait :
- Cara Meredirect 404 Not Found ke Halaman Daftar Isi di WordPress
- Daftar Celah Keamanan WordPress yang Perlu Ditutupi
- Menutupi Celah Keamanan Direktori Wp Content Themes WordPress
- Contoh Halaman Login Website WordPress yang Kena Deface
- Cara Menonaktifkan Emoticon di Dalam Postingan dan Komentar WordPress
WordPress 3.1
[...] Antara Border Bottom dan Underline pada Link di Dalam Posting [...]
WordPress 3.0.4
[...] Saya lebih memilih menggunakan batas bawah ketimbang garis bawah. Silakan baca tentang perbedaan antara underline dan border-bottom pada link. [...]
WordPress 3.0.1
[...] tampilan link kurang mudah dikenali (khusus pada area konten), [...]
Firefox 3.6.3 | Windows XP
urusan yang beginian saya ndak ngerti deh… ndak ngerti CSS, maunya sih belajar :D
Firefox 3.6.3 | Windows XP
Terimakasih mas, saya baru tau nih hehehe. Sering2 sharing yang kaya gini yaa :p
Firefox 3.0.19 | Windows XP
Terima kasih banyak Mas.. Sungguh membantu sekali tips css di postingan ini.
Terima kasih.
Firefox 3.0.10 | Windows XP
Kalau di blogspot gimana mas Is?
Firefox 3.6.3 | Windows XP
@Agung Prasetyo, sama saja sih mas. Sebab pada dasarnya kode CSS itu berlaku umum untuk semua platform blog. Yang beda cuma strukturnya sih. Disesuaikan saja dengan kode template yang berisi tag a.
Firefox 3.6.3 | Windows XP
@ IwanKus : sila diutak-atik mas. Pasti bisa deh.
@ Rudy Azhar : penggunaan background color kan hanya terlihat kalau link-nya disorot mouse. Sebaiknya menurut saya disetting bergaris bawah atau berbatas bawah pada a link-nya Bang.
Firefox 3.6.3 | Windows XP
@iskandaria, tanks atas sarannya Mas…
Firefox 3.6.3 | Windows XP
@Rudy Azhar, sama-sama mas.
Firefox 3.6.3 | Windows XP
jujur saya sampai saat ini masih belum tahu mana yang terbaik, selama ini saya memakai background-color untuk link di blog saya, karena memakai underline atau border-bottom udah umum…
Jadi menurut Mas Is, cara mana yang terbaik???
Firefox 3.6.3 | Ubuntu 10.04
membaca artikel kali ini saya jadi clingak clinguk nge-check blog sendiri
hmmm memang ada beberapa link yang perlu dirubah
nanti akan saya utak-atik lagi deh :D
Firefox 3.6.3 | Windows XP
@ Bung Eko : cieee, yang udah jadi bapak ^_^
@ Blog Juragan : wah, sepertinya saya harus cek di blogspot saya nih untuk membuktikan hasil pengamatan Juragan.
@ Isnuansa : link di dalam posting blog mbak Isnu saya lihat sudah menggunakan batas bawah. Itu bagus. Yang terpenting bisa dengan mudah dikenali oleh mereka yang mengalami sedikit gangguan penglihatan warna :D
@ Ganda : gak pengen ubah jadi border mas?
@ Hakim : liatnya pada
style.cssmas@ Kang Yudiono : menurut saya kontras warna belum cukup Kang, terutama untuk pembaca/pengunjung yang sedikit mengalami kelainan penglihatan (sulit membedakan warna berbeda). Atau bagi yang buta warna. Mereka cuma bisa mengenali link yang bergaris bawah. Itulah sebabnya menurut hemat saya harus disettting bergaris bawah.
Untuk link hover (settingan link saat disorot mouse), menurut saya efek bergaris bawah malah sangat bagus Kang. Sama sekali tidak menggangu. Malahan sangat membantu untuk mengenali bahwa itu sebuah link.
Firefox 3.6.3 | Windows XP
Link di blog saya tanpa garis bawah karena saya sudah memberikan warna kontras sehingga link tersebut mudah dikenali.
Namun, saya menggunakan garis bawah pada hover link tersebut. Dalam pemahaman saya, ini tidak akan mengganggu karena garis bawah hanya muncul sesaat sebelum pengunjung mengklik link tersebut.
Firefox 3.6.3 | Windows XP
waduh cara lihatnya gimana tuh mas??kalo saya pake bawaan theme aja…
Safari 4.0.5 | Windows XP
Saya pakai standar default Mas, menggunakan underline. :) Untuk semua anchor. :)
Firefox 3.6.3 | Windows 7
@ganda, Nggak mau yang beda Gan ? :lol:
Firefox 3.6.3 | Windows Vista
Malah kebalikannya sama saya ya Mas Iskandaria.
Saya memakai warna yang beda (orange) untuk link / pranala di kolom postingan.
Sedangkan untuk di sidebar, da di footer, saya menggunakan garis batas :)
Belum pernah mencoba mengganti dengan sebaliknya sih (di sidebar dihilangkan garis batas maksud saya).
Firefox 3.6.2 | Windows 7
hmm,baiklah, kalo saya komen dari segi wordpress ntar jadinya aneh dan gk nyambung. berhubung saya benar2 buta dgn wordpress :malu: . jadi saya komen dari “kacamata” blogcepot eh blogspot aja. kalo di blogspotkan emang udah default garis bawahnya pake “underline”..tapi hasilnya kok nggak memotong huruf ‘g, y, dkk’ ya ? efeknya malah seperti kita menggunakan ‘border bottom’ alias hanya menyentuh kaki si ‘ g,y, dkk’.
Firefox 3.5.2 | Windows XP
Saya make yang underline, Mas. Soalnya, jujur saja, saya baru tahu kalo link bisa disetel dengan border bawah, ya dari artikel ini. Mungkin akan saya coba lain waktu untuk lain blog. Itupun kalo sempat ngenet lama, maklum, sekarang sudah jadi bapak. Hehehe…
Firefox 3.6.2 | Windows XP
Menyimak dulu ah,, soalnya info baru buat saya,,
Firefox 3.6.3 | Windows 7
Mana yang lebih baik mungkin tergantung jenis font yang digunakan. (saya tidak familiar dengan font2 yang biasa dipakai) Tapi ada beberapa font yang ketika memakai underline ia akan terpotong pada huruf g,j,y. Namun ada juga font yang tetap terbaca jelas meski memakai underline pada anchornya.
Saya pribadi lebih memilih menggunakan underline untuk anchor link, karena untuk link external, saya menggunakan gambar external (seperti di wikipedia) di sebelah kanan link. Jika saya menggunakan border bottom, maka gambar pun akan tergaris bawahi, dan itu menyebabkan tampilannya jadi jelek.
Firefox 3.6.3 | Windows XP
@rismaka, saya belum mengecek pengaruh underline pada banyak font sih mas. Sejauh ini cuma saya amati pada font yang biasa digunakan pada area posting. Semisal arial, verdana, dan georgia. Jika ada yang tetap terbaca jelas, meski menggunakan underline, tentunya tidak jadi masalah sih.
Oya, ternyata penggunaan border-bottom juga mempengaruhi gambar yang mengandung link. Saya baru sadar ketika melihat tampilan logo comluv di bawah form komentar blog ini. Kata Dery sih harus menggunakan property opacity. Saya sendiri belum terlalu familiar dengan property CSS tersebut ^_^
Namoroka 3.6.3 | Arch Linux
@iskandaria, bukannya bisa disetel supaya gambar tidak ikut tergaris/berbatas bawah? Tapi kembali ke pertanyaan saya di atas, lalu bagaimana membedakan gambar yang clickable? :)
Firefox 3.6.3 | Windows XP
@dani, nah, menyetel agar gambar tidak ikut tergarus/berbatas bawah itulah yang saya belum berhasil dalam memformat CSS yang tepat untuknya. Tapi kalau demi mempermudah membedakan gambar yang clickable dan yang tidak, sepertinya dibiarin aja ya berbatas bawah. Atau bli Dani mungkin punya trik lain?
Firefox 3.6.3 | Windows 7
wah wahh wahh..
ilmu baru lagi mas.
sepp..
tpi kayaknya default theme saya dah underlined mas :D
Firefox 3.6.3 | Windows XP
waduh, padahal baru saja mau saya tulis, memberi warna underline link.. tapi sudah diulas disini.. ya sudah gpp, cari yang lain lagi, toh belum saya tulis semuanya, baru jugul posting.. :)
btw, blog ini menggunakan anchor css, untuk semua yang memiliki link ya? gambar yang punya link juga ikut kena border-bottom mas,, jadi gak enak kalo disorot..
saya saranin, kalo gambar lebih baik pake properti opacity saja mas.. :)
Firefox 3.6.3 | Windows XP
@dery, iya ya. Widget alexa dan pagerank di sidebar jadi ikut berborder-bottom jika disorot. Ntar saya coba setting ulang. Thx masukannya.
Namoroka 3.6.3 | Arch Linux
@iskandaria, lalu bagaimana membedakan mana gambar yang clickable dan yang tidak–tanpa harus mengeceknya dengan hovering mouse? :)
Firefox 3.6.3 | Windows XP
@dani, pertanyaan yang sulit bli. Tapi jawabannya mungkin harus diberi garis/batas bawah ya kalau begitu.
Firefox 3.6 | Windows XP
mantep… kapan2 boleh dicoba ni.. :D
Firefox 3.5.9 | Windows XP
saya kurang merhatiin soal ini
coba saya cek punya saya dulu mas
thx ya
Google Chrome 5.0.375.55 | Windows XP
@Ahmad IM-bisnis, nah, raja Kontes malah lupa ngecek blog sendiri…
Firefox 3.5.9 | Windows XP
@Semangat Malam, nah raja Menulis lagi beraksi jualan malam2 :D
Firefox 3.6.3 | Windows XP
@Ahmad IM-bisnis, semangat malam fotonya kok beda ya dengan orangnya yang asli?
Google Chrome 5.0.375.55 | Windows XP
kalau pertanyaannya mana yang lebih baik, dua-duanya oke. sebab fungsinya sama. yang membuat beda mungkin tergantung selera masing-masing blogger saja.
Firefox 3.6.3 | Windows XP
@Agus Siswoyo, selain masalah selera, pertimbangan pengaruhnya pada huruf berkaki tentu juga ikut jadi bahan pertimbangan mas.
Firefox 3.6.3 | Windows XP
that’s good idea buddy, thank’s a lot
Firefox 3.6.3 | Windows XP
terima kasih mas,,ternyata berpengaruh juga garis bawah link,,soalnya saya hilangkan..sekali lagi terima kasih infonya
Google Chrome 5.0.375.55 | GNU/Linux
Kalau saya lebih senang menggunakan warna yang berbeda dari teks untuk linknya…
Dulu pernah memakai yang underline, tapi terlihat berbeda di browser dan OS yang lain, ketika disentuh teksnya malah besar sendiri… :D
Nanti akan saya coba dengan menggunakan border bottom..
Makasih infonya mas… :thumbup:
Google Chrome 5.0.375.70 | Windows XP
@Gede Lumbung,
Menggunakan warna yang berbeda saja mungkin dapat membingungkan bagi mereka yang memiliki buta warna. Mungkin harus dipastikan kontras yang diciptakan tetap bisa diakses oleh orang yang buta warna.
Saya sendiri lebih menyukai penggunaan border bawah. Sebelumnya dengan kombinasi varian small-caps. tetapi ganti lagi karena small-caps saya gunakan untuk abbr.
Firefox 3.6.3 | Windows XP
@Gede Lumbung, soal teksnya yang membesar ketika disentuh/disorot mouse, mungkin itu efek penggunaan link hover yang setelannya bold pada font-weight nya.
Firefox 3.6.3 | Windows 7
Kalau saya memakai text-decoration: underline pada postingan mas. Namun, di sidebar yang tidak mengunakan underline pada link. Ketika di blog saya memakai border bottom, huruf g, j, p, q dan y terpotong juga mas. Kira2 solusinya bagaimana Mas biar ga terpotong? Makasi!
Firefox 3.6.3 | Windows XP
@Gus Adit, mungkin setelan a link generalnya masih tersetting underline Gus. Biasanya ada setelan link secara umum yang ditujukan untuk semua link dalam sebuah blog. Nah, di setelan itu biasanya tersetting underline. Untuk menghilangkan pengaruh/efeknya (agar huruf g, j, p, q, dan y tidak terpotong), kita harus mengubah underline menjadi none.
Contoh kodenya yaitu :
a{text-decoration:none}Firefox 3.6.3 | Windows XP
@Gus Adit, setelah saya intip kode CSS blog Gus Adit, ternyata saya menemukan 2 buah kode link seperti berikut ini :
a {color:#009;text-decoration:underline;}dan
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}Kode pertama saya temukan pada sreen.css
Sedangkan kode kedua saya temukan pada print.css
Untuk menghilangkan efek garis bawah dan menggantinya dengan border bottom, coba Gus Adit ubah kedua kode di atas menjadi :
a{color:#009; text-decoration:none; border-bottom:1px solid #666}dan
a:link, a:visited {background:transparent;font-weight:700;text-decoration:none;}Warna border-bottomnya silakan dipilih sesuai selera. Cari aja dengan keyword “kode warna HTML” di google. Semoga berhasil ya Gus.
Firefox 3.6.3 | Windows 7
@iskandaria,
Maksud saya bukan pada link mas. Linknya malah sekarang saya set ke text-decoration:none. Namun, yang saya pada kata yang bukan link. Ketika saya kasi garis bawah untuk memberikan penekanan, underlinenya malah memotong huruf. Misalkan pada posting saya menekankan kata “blog” dengan memberikan underline. Huruf g pada kata tersebut terpotong. Di blognya mas is jug asaya temukan terpotong pada kata yang di garis bawahi. Ada solusi tidak mas? Thanks sebelumnya.
Firefox 3.6.3 | Windows XP
@Gus Adit, oh maksudnya untuk menggaris-bawahi kata yang ingin ditekankan ya. Kalau begitu, coba gunakan kode CSS berikut ini (masukkan pada file
style.css).garis{border-bottom:1px solid #000;}Nah, misalnya Gus Adit ingin menggaris-bawahi kata “blog” dalam salah satu paragraf di posting, caranya yaitu apitkan tag span pada kata “blog” tersebut dengan atribut class yang sudah disetting pada kode CSS di atas. Jelasnya seperti berikut ini :
Hasilnya, kata “blog” akan digarisbawahi dengan atribut border-bottom. Semoga jelas ya Gus. Kalau belum, silakan tanya kembali di sini.