Membuat Line/Garis Horizontal Dibawah Font

Membuat Line/Garis Horizontal Dibawah Font - Pasinya sobat sudah tahu fungsi dari line/garis, betul sekali fungsi dari line/garis adalah untuk pembatas. Pada artikel sebelumnya saya mengulas membuat garis Pembatas pada Postingan MyWapBlog , kali ini berbeda dengan cara sebelumnya karena cara ini ada membuat line/garis cukup menarik karena menggunakan gambar.

Caranya :

Pertama-tama sobat masuk keakun Blogger, kemudian masuk ke Editor Template lalu sobat cari kode .post-body h3 , contohnya seperti berikut :

After :

.post-body h3 {
font-size: 200%;
font-weight: 400;
margin: 5px 0;
padding-bottom: 12px;
font-family:  Arial, Sans-Serif;
}

Jika sobat sudah menemukannya, sobat tambahkan background pada css , contoh penggunaannya seperti berikut :

Before :

.post-body h3 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtz5a36Ym-_HB1s4xhih8tuVAI_fJIHvU4CPBsJrr8Ull0grh9f1aqiPN-N6TSrSGZXRPgh_qUM-N_Fr7Akk6j3Kmhzl7tL83KChrdCAZsHhamvQQgxUckbGClgF6QTMcBcItuXmZc-E/s1600/bottom-line.gif') left bottom no-repeat;
font-size: 13px;
font-weight: 400;
margin: 5px 0;
padding-bottom: 12px;
font-family: Arial, Sans-Serif;
}

Apabila sudah sobat buat entri baru , untuk memunculkannya sobat tambahkan kode dibawah ini pada font

<h3>Masukkan tulisan Sobat disini</h3>

kemudian sobat publikasikan.

Demo

DEMO Line/Garis Horizontal

Mudah bukan, semoga bermanfaat!

Subscribe to receive free email updates: