Subheading merupakan bagian yang penting pada sebuah artikel, karena berfungsi untuk mempermudah pembaca membedakan antara bagian dari judul dan isi. Jika anda bosan dengan Subheading pada blog anda yang itu-itu saja, anda pun bisa merubahnya. Nah Pada tutorial kali ini saya akan berbagi cara merubah Style Subheading agar lebih rapih dan menarik.
Dengan mengubah Style Subheading H2 pada postingan blog anda maka pembaca akan lebih mudah untuk memahami isi dalam artikel. karena ada perbedaan tampilan tulisan antara sub judul dan isi dalam artikel berupa garis yang ada di bawah sub judul.
Cara merubah tampilan Subheading pada artikel postingan cukup mudah, tinggal menambahkan CSS pada template blog anda. Untuk cara merubah tampilan Subheading seperti pada gambar diatas adalah sebagai berikut.
1. Buka HTML Editor pada menu Template Blogger anda.
Template> Edit HTML
2. Salin kode dibawah ini dan letakkan di atas kode “
</style>” atau “
]]></:skin>”
/* CSS H2 Modif */
post-body h3,.post-body h4,.post-body h5,.post-body h6{
position:relative;
margin:0 0 5px;
padding:0 0 15px 0;
border-bottom:2px 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:-2px;left:0;right:0;
background:#f39c12;
width:10%;
height:2px
}
Untuk mengubah warna garis bawah silahkan ganti #f39c12 dengan warna yang anda inginkan.
3. Jika sudah selesai Simpan Template
Setelah menambahkan kode CSS di atas maka tampilan Subheading pada postingan blog menjadi seperti gambar dibawah ini.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dari gambar diatas terlihat subheading lebih rapih dan terdapat garis di bawahnya, sehingga terlihat lebih menarik dan rapih. pembaca pun akan lebih nyaman melihatnya.
