Cara Membuat Style Subheading Keren

Cara Membuat Style Subheading Keren

Sebagai blogger, sudahkah kamu tahu apa itu Subheading? Meskipun jarang digunakan, nyatanya Subheading dapat membantu artikelmu nangkring di halaman 1 pencarian Google. Walaupun sebenarnya masih banyak aspek yg perlu kamu pahami untuk membuat artikel blogmu nangkring.

Subheading merupakan bagian dari Heading Tag, yaitu <H3>. Heading Tag sendiri tersusun atas 6 tingkatan, yakni <H1>, <H2>, <H3>, <H4>, <H5>, dan <H6>.

Dalam sebuah artikel, Subheading atau <H3> berfungsi untuk memberikan informasi poin penting kepada pembaca. Sehingga pembaca dapat melihat isi artikel kamu dengan lebih terstruktur dan rapi.

Berbeda dengan tag <H1> dan <H2>, <H3> dan tag seterusnya tidak dibatasi jumlah penggunaannya pada suatu halaman blog. Namun, alangkah baiknya dimanfaatkan dengan baik dan tidak digunakan secara berlebihan untuk menghindari hal yang tidak diinginkan.

Saya rasa nggak perlu menjelaskan Heading Tag ini, kalau mau mungkin saya akan bahas di artikel selanjutnya.

Bagi teman-teman yang belum tahu Subheading itu yang mana, silahkan lihat gambar dibawah.
Cara Membuat Style Subheading Keren

Sedangkan untuk penggunaannya bisa melalui menu yang ada pada mode penulisan entri. Selain itu kamu juga bisa menggunakan Heading atau Minor heading sesuai kebutuhanmu.
Cara Membuat Style Subheading Keren

Saya sendiri selalu menggunakan Subheading di setiap artikel yang saya buat di blog ini. Selain pengunjung nyaman membaca, artikel blog saya pun jadi memiliki SERP yang bagus.

Cara Membuat Style Subheading Keren

Untuk memodifikasi subheading supaya jadi lebih keren, caranya sangat mudah.
  1. Masuk ke bagian Template dan Edit HTML.
  2. Copy kode dibawah ini lalu paste-kan di atas ]]></b:skin>.
  3. /* Style Subheading */
    .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:140%;}
    .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:#32CD32;width:7%;height:2px;}


  4. Simpan Template.
  5. Terakhir, kamu bisa gunakan Subheading dan lihat hasilnya.

Comments

  1. gan, ane dah coba pasang script itu ke blog saya, tapi kok gak ada perubahan?

    ReplyDelete
    Replies
    1. Coba disimak baik-baik gan mungkin ada yg salah dari cara penerapan agan :)

      Delete
  2. Gan kalau ane pasang script kyk gt pengaruh gak gan sm trafic blog? Apakah akan bertmbh traffic nya atau tetap sm?

    ReplyDelete
    Replies
    1. Ya nggak pengaruh lah gan hihi ini kan cuma css :v

      Delete
  3. makasih kang untuk tutorial nya..

    ReplyDelete
  4. Ini berpengaruh sama kecepatan loading blog tidak gan?

    ReplyDelete
  5. makasih ane terapinnn kayaknya keren

    ReplyDelete
  6. Wah bgus jdinya, thanks gan

    ReplyDelete
  7. Sangat bermanfaat. Artikel kayak gini nhi yg gw cari. thanks bgt. ☺

    ReplyDelete
  8. nanti ane coba di blog ane dah tutornya gan

    ReplyDelete

Post a Comment