Cara Membuat Heading dan Subheading Keren dengan CSS - Salah satu komponen yang cukup penting ketika menciptakan artikel yaitu adanya heading tag alasannya lebih SEO Friendly. Heading tag terdiri dari H1, H2, H3, H4, H5, H6. Biasanya para blogger hanya memakai H1, H2, dan H3 saja yang sudah dioptimasi. Untuk penggunaan heading 1 padaa halaman artikel biasanya dipakai pada nama blog. Heading 2 dipakai pada judul artikel dan Heading 3 dipakai 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 memakai CSS agarlebih menarik, SEO On Page, dan juga memudahkan pengunjung untuk membaca serta melihat goresan pena yang menjadi poin penting yang disampaikan.
Membuat style Heading (H2) dengan CSS keren
1. Buka dashbor blogger>tema>edit html
2. Copy paste instruksi di bawah ini sempurna sebelum instruksi ]]></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 harapan dengan mengubah #3284cd
Membuat style Subheading (H3) memakai CSS
1. Buka dashbor blogger>template>edit html
2. Salin instruksi di bawah ini dan tempatkan sempurna 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 menciptakan heading dan subheading memakai CSS semoga kelihatan keren berbeda dengan biasanya alasannya sudah di modifikasi. Berikut referensi hasilnya.