Home / Blog / Tips dan Trik

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



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
    • '