Minggu, 14 Desember 2014

Membuat & Memasang Teks Diantara Dua Garis

Membuat & Memasang Teks Diantara Dua Garis - hmm judul artikelnya sedikit membingungkan ya, intinya seperti ini kita membuat teks dan memasangkan dua garis di sisi kanan atau kiri teks tersebut sehingga teks berada ditengah garis. Atau judulnya seperti ini saja ya, Memasang teks ditengah garis.. Yaa pokoknya pada artikel ini saya akan membuat dan memasang tesk diantara dua garis seperti yang terlihat pada gambar berikut ini

Membuat & Memasang Teks Diantara Dua Garis

Jika Anda tertarik untuk membuat dan memasang teks dianatara dua garis ini, silahkan salin kode CSS berikut ini kedalam template blog Anda. salin sebelum kode ]]></b:skin> atau sebelum kode </style>
menu Template >> Edit HTML >> cari kode ]]></b:skin> atau </style>
tekstengah {font-family:Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin:0px;
  padding: .1em 0;
  color: #000;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
tekstengah:before,
tekstengah:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 20%;
  height: 1px;
  vertical-align: middle;
  background: #000;
}
tekstengah:before {    
  left: -5px;
  margin: 0;
}
tekstengah:after {    
  left: 5px;
  margin: 0;
}
tekstengah > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

Penjelasan:
Edit beberapa value yang ada pada tiap komponen berikut ini agar menyesuaikan dengan tata letak yang diharapkan
tekstengah:before,
tekstengah:after {
content: "";
position: relative;
display: inline-block;
width: 20%; /* ganti untuk menyesuaikan lebar */
height: 1px;
vertical-align: middle;
background: #000;
}
tekstengah:before {
left: -5px; /* ganti untuk menyesuaikan jarak teks dan garis */
margin: 0;
}
tekstengah:after {
left: 5px;/* ganti untuk menyesuaikan jarak teks dan garis */
margin: 0;
}

DEMO
Membuat & Memasang Teks Diantara Dua Garis


Sedangkan untuk kode markup HTML membuat dan memasang tesk diantara dua garis, silahkan salin kode berikut ini:
<tekstengah>Membuat & Memasang Teks Diantara Dua Garis</tekstengah>

Mudah bukan? Jika Anda bertanya pengaruh kode CSS tersebut terhadap loading blog, tidak ada pengaruhnya sama sekali. Dan silahkan jika Anda tertarik untuk membuat dan memasang tesk diantara dua garis didalam blog atau pun artikel blog Anda. Terimakasih

Membuat & Memasang Teks Diantara Dua Garis Rating: 4.5 Diposkan Oleh: ana sriwahyuni

3 komentar:

  1. Balasan
    1. Betul ya Mas Yeyep akep dan menarik tutorial Mbak Ana ini sangat tekun dan kreatif Mbak ini

      Hapus
  2. Menarik tutorial membuat Teks nih Mbak bisa saya coba langsung buat di blog saya .. ijin ambil script nya ya buat nambah pelajaran ekpresi saya makasih :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia