Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Membuat Heading Keren Menggunakan CSS

Cara Membuat Heading Keren Menggunakan CSS
Cara Membuat Heading Keren Menggunakan CSS
Cara Membuat Subheading dan Heading Keren Menggunakan CSS - Subheading dan Heading adalah salah satu komponen yang cukup sangat penting dalam membuat sebuah artikel. Menggunakan Heading dan Subheading akan membuat artikel lebih SEO Friendly.

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>

.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;}

5. Jika sudah Save Template!

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>

.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;

5. Jika sudah Save Template!

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!!
Show comments
Hide comments

0 Response to "Cara Membuat Heading Keren Menggunakan CSS"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×