Membuat Line/Garis Horizontal Dibawah Font

Membuat Line/Garis Horizontal Dibawah Font - Pasinya sahabat sudah tahu fungsi dari line/garis, betul sekali fungsi dari line/garis yakni untuk pembatas. Pada artikel sebelumnya saya mengulas menciptakan garis Pembatas pada Postingan MyWapBlog , kali ini berbeda dengan cara sebelumnya alasannya yakni cara ini ada menciptakan line/garis cukup menarik alasannya yakni memakai gambar.

Caranya :

Pertama-tama sahabat masuk keakun Blogger, kemudian masuk ke Editor Template kemudian sahabat cari kode .post-body h3 , misalnya menyerupai berikut :

After :

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

Jika sahabat sudah menemukannya, sahabat tambahkan background pada css , pola penggunaannya menyerupai berikut :

Before :

.post-body h3 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho005zHmwIkP1keyKNLD4BW4ybpXDPtVXSUp8QoY8yiaeDXZOBPBSUsxqiuoxV48Y-APU2UbD9CuVNg4gwXEQYIp-OBITjD_sRGN17MZnhVa-2SekngFSdo3eL1V1-IhBa7vrLjTXqEws/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 sahabat buat entri gres , untuk memunculkannya sahabat tambahkan instruksi dibawah ini pada font

<h3>Masukkan goresan pena Sobat disini</h3>

kemudian sahabat publikasikan.

Demo

DEMO Line/Garis Horizontal

Mudah bukan, supaya bermanfaat!

Sumber http://www.websiteedukasi.com/