Cara Membuat Heading dan Subheading Keren dengan CSS

Cara Membuat Heading dan Subheading Keren dengan CSS - Salah satu komponen yang cukup penting saat membuat artikel adalah adanya heading tag karena lebih SEO Friendly. Heading tag terdiri dari H1, H2, H3, H4, H5, H6. Biasanya para blogger hanya menggunakan H1, H2, dan H3 saja yang sudah dioptimasi. Untuk penggunaan heading 1 padaa halaman artikel biasanya digunakan pada nama blog. Heading 2 digunakan pada judul artikel dan Heading 3 digunakan pada poin-poin yang dianggap penting dalam artikel tersebut. Nah untuk itu akan Saya berikan cara mengganti style heading (H2) dan subheading (H3) dalam postingan blog menggunakan CSS agarlebih menarik, SEO On Page, dan juga memudahkan pengunjung untuk membaca serta melihat tulisan yang menjadi poin penting yang disampaikan.

Membuat style Heading (H2) dengan CSS keren

1. Buka dashbor blogger>tema>edit html

2. Copy paste kode di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

.post-body h2,
.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}
.post-body h2{font-size:150%;font-weight:bold;text-align: left;color: #6607ed;font:#6607ed;}
.post-body h2:before,
.post-body h5:before,
.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#3284cd;width:10%;height:2px;}

CATATAN

Untuk mengganti ukuran teks, ubah font-size:150% sesuai keinginanmu
Ganti warna teks sesuai keinginanmu dengan mengubah #6607ed
Ganti warna underline di bawah teks sesuai keinginan dengan mengubah #3284cd

Membuat style Subheading (H3) menggunakan CSS

1. Buka dashbor blogger>template>edit html

2. Salin kode di bawah ini dan tempatkan tepat di atas ]]></b:skin> atau </style>

.post-body h3,
.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}
.post-body h3{font-size:120%;}
.post-body h5{font-size:100%;}
.post-body h6{font-size:80%;}
.post-body h3:before,
.post-body h5:before,
.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#3284cd;width:10%;height:2px;

Demikian tutorial dari Saya cara membuat heading dan subheading menggunakan CSS agar kelihatan keren berbeda dengan biasanya karena sudah di modifikasi. Berikut contoh hasilnya.

Demo