Cara Menciptakan Heading Dan Subheading Keren Dengan Css

Cara Membuat Heading dan Subheading Keren dengan CSS - Salah satu komponen yang cukup penting dikala menciptakan artikel ialah adanya heading tag alasannya ialah 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 isyarat di bawah ini sempurna sebelum isyarat ]]></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 isyarat 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 ialah sudah di modifikasi. Berikut teladan hasilnya.

Demo