8.5.15
7
Text With Border Color
Membuat Garis Berwarna Pada Teks - 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). 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 Anda seperti ini:

DEMO SHOW



SB-77 DESIGN


SAHABAT BLOGGER 77


DEVY INDRIYANI



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



<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. HTML lengkapnya seperti ini:


<p class="text-line"> <!--letak garis disebelah kanan teks-->
<span>SAHABAT BLOGGER 77</span></p>

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

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


Sederhana, mudah dan terlihat lebih menarik dibanding hanya membuat garis bawah pada teks yang kita inginkan. Sambil memikirkan teks yang akan Anda berikan garis berwarna seperti diatas, bagaimana kalau sambil menikmati » 10 Gaya Efek CSS Animasi Pada Teks yang sudah admin rangkum terspesial untuk sahabat semua pecinta SAHABAT BLOGGER 77, saya harap semoga terhibur. Terimakasih dan happy blogging..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Garis Berwarna Pada Teks
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

7 komentar

  1. .Bisa juga nih dibuat semacam TTD ketika di akhir penulisan artikel.
    .Lanjutkan mbak idenya. :D

    BalasHapus
    Balasan
    1. biasanya sih seperti itu mas, ucapan TERIMA KASIH.

      Hapus
  2. thanks sahabat blogger

    salam bw

    BalasHapus
  3. Sudah muncul jadi bisa bilang terima kasih dan ini untuk postingan berikutnya bisa jadi meriah dengan garis wara wirinya..
    terima kasih sudah berbagi :)

    BalasHapus
  4. begitu banyak sudah tutorial blogger cantik disini namun belum satupun yang saya terapkan masih belum mudem utak-atik template

    BalasHapus
  5. wah keren nanti di praktekin ya... mba devy..

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK