Cara Membuat Heading Keren Menggunakan CSS
September 16, 2019
Tidak hanya itu, dengan menggunakan Subheading dan Heading akan mempermudah pengindexan sebuah artikel yang memberikan sebuah keuntungan untuk blog.
Menggunakan Subheading dan Heading dengan kata kunci akan membuat artikel sobat lebih SEO dan kata kunci tersebut akan mudah ditampilkan di mesin pencari.
Heading terdiri dari H1, H2, H3, H4, H5, dan H6. Kebanyakan para blogger menggunakan Heading H1, H2 dan H3 dikarenakan Heading tersebut lebih baik dan bagus.
Untuk H1 biasanya para blogger menggunakan untuk judul artikel blognya, dan untuk H2 biasanya Kata Kunci dalam artikel. Kalau untuk H3 biasanya digunakan untuk pada sebuah kata kunci yang sangat penting baru digunakan H3.
Termasuk saya juga sering menggunakan Heading H1, H2 dan H3 ini juga dan untuk heading selebihnya saya kurang menggunakannya. Pada kali ini saya akan memberi tahu cara membuat H2 Keren di Blog.
Jika sobat tertarik cara membuat H3 di blog, sobat dapat juga memasangnya di theme blog sobat. Keuntungan dengan memasang heading adalah membuat artikel SEO On Page dan memudahkan pembaca untuk melihat point-point penting dalam artikel blog.
Baca Juga: Cara Membuat Kalkulator Kata di Blog
Berikut ini adalah cara membuat heading dengan style keren dan tentunya responsive menggunakan CSS. Silahkan ikuti dibawah ini.
Cara Membuat Style Heading H2 Keren di Blog
Silahkan diikuti langkah-langkahnya dibawah ini dan cara membuat heading di blog dengan css sangatlah mudah.
1. Pertama, Login ke Blogger.com
2. Pilih Theme/Template > Edit HTML
3. Cari Kode ]]></b:skin>
4. Copy dan pastekan kode dibawah ini diatas kode ]]></b:skin>
5. Jika sudah Save Template!
.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;}
Diatas adalah Tutorial Cara Membuat Heading H2 Dengan CSS, jika ingin membuat heading h3, bisa ikuti tutorialnya dibawah ini dan cara memasangnya sama yang beda hanya kode CSSnya saja yang berbeda.
Cara Membuat Style Heading H3 Keren di Blog
1. Pertama Login Ke Blogger.com
2. Pilih Theme/Template > Edit HTML
3. Cari Kode ]]></b:skin>
4. Copy dan Pastekan kode dibawah ini diatas kode ]]></b:skin>
5. Jika sudah Save Template!.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;
Catatan:
- Jika ingin mengubah ukuran Teks, cukup ubah saja pada bagian kode font-size:120%
- Jika ingin mengubah warna teks, cukup ubah pada bagian kode color: #6607ed
- Jika ingin mengubah warna garis bawahnya, cukup ubah saja kode background: #3284cd
Demikilah artikel kali ini cara membuat heading menggunkan css keren, semoga bermanfaat dan membantu sobat semuanya!! Jika ingin melihar Demonya seperti pada artikel ini!
Happy Blogging!!
0 komentar