Cara Menciptakan Teks Diatara Dua Garis Di Blog

Cara Menciptakan Teks Diatara Dua Garis Di Blog

Cara Menciptakan Teks Diatara Dua Garis Di Blog

Cara menambahkan teks diantara dua garis maksudnya kedua garis terdiri diantara teks . Pembuatan cukup memakai CSS, dengan struktur Pseudo element :before dan ::after . Jika di artikan, :before di tempatkan sebelum elemen utama. sedangkan :after dipakai sehabis elemen utama. Sebagai referensi Anda dapat melihat screnshotnya dibawah ini :


Selain menciptakan dua teks, dapat juga Anda percantik menyerupai :

>> Membuat teks berjalan
>> Membuat Teks bergerak dari bawah ke atas
>> Membuat Tulisan warna-warni/Reinbow di Postingan

Bagaimana Anda tertarik ingin menciptakan teks di antara dua garis, kalau tertarik berikut ini langkah-langkahnya :

1. Masuk keakun Blogger
2. Pilih Template >> klik Edit HTML
3. lalu dengan memakai CTRL+F cari kode ]]></b:skin>
4. Lalu salin aba-aba dibawah ini dan terapkan diatasanya :

teksgaris {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;
}
teksgaris:before,
teksgaris:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #000;
}
teksgaris:before {    
  left: -10px;
  margin: 0;
}
teksgaris:after {    
  left: 10px;
  margin: 0;
}
teksgaris > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

Penjelasan :

==> width: 50%; Pengaturan lebar

==> left: -10px;  Pengaturan jarak teks dan garis

==> left: 10px; Pengaturan jarak teks dan garis

5. Simpan Template
6. Selanjutnya Anda copy aba-aba dibawah ini dan pastekan di Entri gres Mode HTML

<teksgaris> Masukkan Teks Anda di sini . . . </teksgaris>

7. Publikasikan

Mudah bukan, selamat mencoba!
Sumber http://www.websiteedukasi.com/
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser