Cara Buat Garis Berwarna Di Sisi Kanan Kiri Text Dengan CSS

MP4U - Cara Buat Garis Berwarna Di Sisi Kanan Kiri Text Dengan CSS - Seperti yang sudah kita ketahui bersama .. untuk membuat garis pada text .. tidaklah sulit .. cukup dengan menambahkan Tag "U ( Underline )" .. maka text akan bergaris dibagian bawah .. hal ini dilakukan biasanya untuk keperluan tertentu .. semisal menandai info penting dengan memberinya garis di bagian bawah ini .. contoh nya semisal seperti ini Contoh Text Underline ( Garis Bawah ) .. maka pembacapun akan mengerti bahwa text tersebut sebuah info penting ataupun sebuah peringatan ..

Nah, sekarang bagaimana untuk memberi garis di bagian sisi kanan / kiri text ?? .. jawab nya simple - simple aja .. kita cuma membutuhkan sebuah CSS .. dan Tag HTML .. untuk menciptakan garis berada di sebalah kanan / kiri text tersebut .. untuk hasilnya bisa sobat lihat gambar di bawah ini ..



sekarang cukup faham kan ?? apa yang admin maksud ?? .. nah, kira - kira seperti itulah guys hasilnya .. text bergaris di sisi kanan kiri .. lalu bagaimana cara buatnya ?? .. biar tidak penasaran langsung aja kita mulai .. berikut sedikit penjelasan nya ..

Dengan pemberian elemen "Underline" pada sebuah teks yang kita anggap penting .. cukup menuliskan fungsinya seperti ini : <u>Membuat Garis Berwarna Pada Teks</u> maka teks sudah diberi garis bawah (text-decoration:underline) .. seperti yang sudah admin contohkan di awal pembahasan di atas .. dengan hasil text Bergaris Bawah .. Namun bukan itu yang akan kita terapkan dalam tutorial kali ini ..

seperti pembahasan terdahulu tentang » Cara Membuat Border Pada Judul Artikel Blog adalah kegiatan untuk membuat title judul menjadi menarik dengan border-line .. efek kali ini akan jauh lebih menarik dan keren untuk memberikan hiasan garis berwarna pada teks tulisan sobat .. contoh nyatanya seperti di bawah ini :

My Post For You


MP4U


Author : Ocha



Memberi garis berwarna disisi TEXT .. bukan dibawah text .. Sehingga teks yang menurut Anda penting seperti judul postingan .. sub judul atau poin-poin penting saat sobat memberikan informasi tips akan terlihat lebih cantik dan menarik hanya dengan penggunaan CSS seperti ini :

Code CSS

<style type="text/css">
.text-line span {padding:10px;background:#fff}
.text-line.right {text-align:right}
.text-line.center {text-align:center}
.text-line {background-color:red;height:3px;vertical-align:middle;line-height:1px}
p {font:bold 18px Verdana,sans-serif}
</style>


Pada pengaturan CSS diatas .. saya memberikan 3 model tampilan warna garis pada teks .. Anda tinggal memilih style mana yang menurut Anda berkesan untuk dipasang dalam postingan blog Anda .. dan berikut tag HTML lengkapnya seperti dibawah ini :

Code HTML

<p class="text-line"> <!--letak garis disebelah kanan teks-->
<span>My Post For You</span></p>

<p class="text-line right"> <!--letak garis disebelah kiri teks-->
<span>MP4U</span></p>

<p class="text-line center"> <!--letak garis disebelah kanan dan kiri teks-->
<span>Author : Ocha</span></p>


gimana sangat mudah dan sederhana bukan ?? .. jika sobat berminat silahkan sopas aja semua kode CSS & HTML nya .. yang perlu sobat ganti pada bagian Tag HTML yang berwarna biru nya sajaa .. dan terimakasih sudah meluangkan waktunya untuk membaca Cara Buat Garis Berwarna Di Sisi Kanan Kiri Text Dengan CSS .. semoga bermanfaat dan sampai jumpa ..



Tag : #CSS, #HTML, #Tag CSS, #Tag HTML, #Text Underline, #Blog, #Tutor Blog, #Tutorial Blog, #Teks Garis Bawah, #Cara, #Cara Buat, #Cara Membuat, #Cara Ngebuat, #Cara Bikin, #Cara membikin, #Cara Ngebikin, #Cara Bikinin, #Cara Buat Garis Berwarna Di Sisi Kanan Kiri Text Dengan CSS
 
Top
'
Loading...