Membuat Teks Underline (Garis Bawah) Berwarna - Pada artikel kemarin saya sudah membuatkan tentang teks diantara dua garis atau teks berada ditengah garis dan sekarang saya akan mebuatkan panduan tentang membuat teks underline atau garis bawah berwarna
Silahkan baca dulu Membuat teks diantara dua garis
.textu { background-color: #1e1d1e; border: 1px solid #d2d2d2; line-height: 18px; padding: 10px; margin: 0px 0px 30px 0; vertical-align: baseline; font-size: 24px; text-align: center; border-radius: 4px; width: 400px; float: center; margin-right: 20px; font-family: Tahoma,Geneva,Arial,sans-serif; } .textu a { text-decoration: none; } .textu a:link { color: #0fead3; border-bottom: 1px solid #0fead3; } .textu a:visited { color: #0fead3; border-bottom: 1px solid #c0c0c0; } .textu a:active { color: #0fead3; border-bottom: 1px dashed #ff0000; } .textu a:hover { color: #fd8f01; border-bottom: 2px dashed #fd8f01; }
Cara Membuat Teks Underline (Garis Bawah) Berwarna
Jika Anda tertarik untuk membuat teks underline atau garis bawah seperti Demo diatas, silahkan ikuti caranya berikut ini:
Salin kode CSS berikut ini kedalam kode template blog Anda
CSS
HTML
Salin dan sesuaikan kode markup HTML untuk teks underline atau garis bawah berwarna berikut ini
<div class="textu"><a href="#">www.PanduanTemplateBlog.com</a></div>
Arahkan kursor mouse ke kolom teks berikut untuk melihat efek garis bawah berwarna
Mudah bukan untuk membuat teks underline atau garis bawah berwarna ini karena hanya memanfaatkan kode css saja dan jika Anda ingin memasangnya secara otomatis dan terpasang pada seluruh halaman blog, hilangkan kode class .textu sehingga hyperlink yang ada didalam blog Anda akan memiliki efek teks garis bawah berwarna. Terimakasih
Silahkan baca dulu Membuat teks diantara dua garis
.textu { background-color: #1e1d1e; border: 1px solid #d2d2d2; line-height: 18px; padding: 10px; margin: 0px 0px 30px 0; vertical-align: baseline; font-size: 24px; text-align: center; border-radius: 4px; width: 400px; float: center; margin-right: 20px; font-family: Tahoma,Geneva,Arial,sans-serif; } .textu a { text-decoration: none; } .textu a:link { color: #0fead3; border-bottom: 1px solid #0fead3; } .textu a:visited { color: #0fead3; border-bottom: 1px solid #c0c0c0; } .textu a:active { color: #0fead3; border-bottom: 1px dashed #ff0000; } .textu a:hover { color: #fd8f01; border-bottom: 2px dashed #fd8f01; }
Cara Membuat Teks Underline (Garis Bawah) Berwarna
Jika Anda tertarik untuk membuat teks underline atau garis bawah seperti Demo diatas, silahkan ikuti caranya berikut ini:
Salin kode CSS berikut ini kedalam kode template blog Anda
CSS
.textu a {
text-decoration: none;
}
.textu a:link {
color: #0fead3;
border-bottom: 1px solid #0fead3;
}
.textu a:visited {
color: #0fead3;
border-bottom: 1px solid #c0c0c0;
}
.textu a:active {
color: #0fead3;
border-bottom: 1px dashed #ff0000;
}
.textu a:hover {
color: #fd8f01;
border-bottom: 2px dashed #fd8f01;
}HTML
Salin dan sesuaikan kode markup HTML untuk teks underline atau garis bawah berwarna berikut ini
<div class="textu"><a href="#">www.PanduanTemplateBlog.com</a></div>
Arahkan kursor mouse ke kolom teks berikut untuk melihat efek garis bawah berwarna
Mudah bukan untuk membuat teks underline atau garis bawah berwarna ini karena hanya memanfaatkan kode css saja dan jika Anda ingin memasangnya secara otomatis dan terpasang pada seluruh halaman blog, hilangkan kode class .textu sehingga hyperlink yang ada didalam blog Anda akan memiliki efek teks garis bawah berwarna. Terimakasih
bagus bu ana saya mau coba buat blog yg lainnya.. terima kasih
BalasHapusterimakasih banyak juga mas Rama, semoga bermanfaat..
Hapusamiin.. sangat bermanfa'at sekali.
Hapuslinknya jadi lebih menarik ya mbak, kalo warna-warni :D
BalasHapusiya mas Indra, lebih menarik lagi jika disesuaikan dengan keinginan :)
HapusTerima kasih info nya.. :)
BalasHapuscantik juga kalau di buat begini..
sama-sama mbak Fidah, terima kasih kembali.. :)
Hapusatraktif hasilnya, jadi lebih menarik perhatian pengunjung...makasih mba triknya
BalasHapusiya mas Wong, lebih unik kan :)
Hapusterimakasih banyak juga mas...
terimakasih infonya mba hehe
BalasHapussama-sama mbak Ipah... terimakasih banyak... :)
Hapusnah pengetahuan saya nambah lahi nih seumur-umur ng'blog ngga pernah ngeh jika ternyata ada hal menarik untuk memperindah artikel dengan memberi garis bawah yang berwarna warni, ternyata harus memasang kode di atas itu ya bu sebab selama ini garis bawah sangat jarang saya pake dalam postingan, selain juga seringkali garis bawah yang biasa dan ada tersedia itu ngga valid HTML5...gituh buk.
BalasHapushanya sebagai referensi saja mas, semoga bermanfaat..
Hapuskalau untuk valid HTML5 bisa disesuaikan saja mas dan untuk setiap tutor yang ada di blog ini tidak selalu mengacu pada validitas saja :)
jadi makin keren dan berwarna ya hover link nya, bagus juga ni untuk menambah cantik tampilan blog kita.
BalasHapusiya mas Arie, silahkan di coba mas :)
Hapussaya juga mau coba ah mbak
Hapusapanya yang mau di coba mas Yanto?
Hapusteksnya underlinnya dong mbak,biar terlihat lebih profesional
Hapusmasak mau coba yg lain.hehehe
cantik juga ya, perpaduan warnanya bisa pilih pilih ga ya..
BalasHapusbisa mbak Tika, bisa disesuaikan dengan keinginan :)
Hapusterimakasih Uda.. semoga bermanfaat.. :)
BalasHapusweh kren saya coba terapin nanti pas buat tutorial
BalasHapussilahkan mas Em, semoga bermanfaat ya..
Hapuskeren habis nih,bisa berganti warna dlm sekejap.
BalasHapusteks ini apa bisa digunakan untuk judul artikel yambak?
untuk warna bisa disesuaikan mas agar bisa lebih keren lagi.. bisa banget mas Yanto..
Hapusok deh kalau gitu
Hapusmakasih sharingnya
wah keren mbak artikelnya nanti tak coba :)
BalasHapus