SAKJANESIP - Hallo gengs ! Buat postingan hari kedua saya yang akan di bahas adalah cara membuat heading dengan line FLAT UI, jika blog sobat nih di heading nya belum ada line nya seperti ada yang kurang gitu, hehe. Ya tergantung selera sih ya, iya kan ?
 |
| Ilustrasi | SAKJANESIP |
Langkah membuatnya cukup mudah, tingal garis aja pake pemes di blog jadi, hehe, memangnya kertas apa ya? Baiklah fungsi dari line ini hanya memperindah penampilan heading di blog, untuk warna dan lainya silahkan kreasikan dengan favorit sobat.
Membuat Heading dengan Line Flat UI di Blog
Masuk ke blogger ⇏ Template ⇏ EDIT HTML ⇏ Tambahkan kode di bawah ini di atas </style>
/* CSS HEADING LINE by Zhuberzhu */
<style type='text/css'>
.post-body h3{font-size:140%;}.post-body h4{font-size:120%;}.post-body h5{font-size:100%;}.post-body h6{font-size:80%;}
.post-body h3, .post-body h4, .post-body h5, .post-body h6 {
position: relative;
margin: 0 0 10px;
padding: 10px 0;
border-bottom: 2px solid #e0e0e0;
font-weight: 500;
letter-spacing: 1px;
}
h4 {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.post-body h3:before, .post-body h4:before, .post-body h5:before, .post-body h6:before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
background: #fc4f69;
width: 7%;
height: 2px;
}
</style>
Jika sudah klik simpan dan lanjut ke POS buat sebuah postingan dengan tag H3,H4, dkk. Demo nya bisa cek di atas postingan ini yang ada garis merah.
 |
| Contoh Heading dengan Line CSS |
Cukup sekian tutorial cara Membuat Heading dengan Line Flat UI di Blog, Silahkan share jika ini bermanfaat. Maturnuwun ya sobat.
EmoticonEmoticon