Cara Modifikasi Style Subheading Pada Postingan Blog

Modifikasi Style Subheading Pada Postingan Blog - Subheading adalah salah satu bagian yang sangat penting pada sebuah artikel, dimana subheading ini berfungsi untuk mempermudah pembaca untuk membedakan antara judul dan bagian isi postingan blog. Dengan memberikan subheading (judul) tentu akan memudahkan pembaca untuk memahami bagian demi bagian isi postingan yang kita tulis.

Apa sih Subheading itu?

Subheading atau penajukan adalah semacam judul kecil yang membagi artikel kita menjadi beberapa bagian. Sederhananya, subheading adalah judul yang kita buat untuk memisahkan suatu pembahasan disebuah artikel blog.

Sebenarnya, subheading ini sudah disediakan secara dafault di blogger. Heading terdiri dari 6 bagian, misalnya H1,H2,H3,H4,H5,H6. Blogger sudah mengatur secara umum untuk ukurannya, tapi kita juga masih bisa untuk memodifikasi tampilannya.

Modifikasi Style Subheading Pada Postingan Blog

Pada artikel kali ini, saya mau berbagi sedikit tips tentang bagaimana cara untuk memodifikasi tampilan subheading pada postingan blog. Modifikasi subheading kali ini sangatlah mudah, karena kita hanya perlu menambahkan kode CSS pada tema blog. Tapi jangan salah, meski simple namun tampilan modifikasi subheading ini sangat menarik dengan sedikit animasi hover.

Bagi kamu yang penasaran dengan tampilan modifikasi subheading ini, kamu bisa melihat pembagian judul yang ada pada artikel ini. Karena kebetulan saya juga menerapkan trik subheading ini pada blog ini, hanya saja tidak menggunakan animasi hover.

Cara Merubah Style Subheading

Untuk mengubah tampilan subheading, kamu hanya perlu menambahkan kode CSS dibawah ini kedalam tema blog kamu. Copy dan paste-kan kode berikut tepat diatas kode </style> didalam tema blog kamu.

/* CSS Heading Modif */
.post-body h3,.post-body h4,.post-body h5,.post-body h6{
position:relative;
margin:0 0 10px;
padding:0 0 15px 0;
border-bottom:1px solid rgba(0,0,0,0.05);
letter-spacing:1px
}
.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before{
content:'';
position:absolute;
bottom:-1px;left:0;right:0;
background:#2e87e7;
width:25%;
height:1px;
transition:all .3s
} 
.post-body:hover h3:before,.post-body:hover h4:before,.post-body:hover h5:before,.post-body:hover h6:before{width:40%}

Kemudian, jangan lupa untuk menyimpan tema blog kamu. Untuk mengubah tampilan garis bawah, kamu juga bisa mengganti kode warna dan juga ketebalan yang sudah saya tandai pada kode diatas.

Menerapkan Subheading Pada Postingan Blog

Untuk menerapkan modifikasi tampilan subheading ini pada postingan blog, kamu hanya perlu membuat tag judul menggunakan H3-H6 ketika membuat postingan baru. Kamu juga bisa memilih secara otomatis seperti gambar dibawah ini.

Bagaimana, cukup mudahkan? Bagi kamu yang masih memiliki masalah seputar artikel diatas, kamu bisa menanyakan melalui kotak komentar dibawah ini. Saya rasa itu saja yang bisa saya bagikan, semoga artikel tentang 'Cara Modifikasi Style Subheading Pada Postingan Blog' bisa bermanfaat untuk kalian semua. Sampai jumpa.