Cara Membuat Heading (h2) Dengan Style CSS Keren Di Blogspot

Abilo blog |
Seperti biasa kali ini saya akan membagikan tutorial blogging menyerupai biasa. Kita akan membuat heading dengan style keren. Sempat sebelumnya kita membuat subheading kini kita juga akan membuat dan mengedit tampilan heading (2) di postingan blog supaya lebih keren dan menarik.

Sebelumnya kenapa kita perlu mengedit style heading? Tujuannya ialah untuk membedakan antara judul dan isi ,walaupun headin dan isi memiliki perbedaan dari ukuran fontnya. Serta heading juga dibuat dengan style bold. Namun kita harus menambahkan style menyerupai warna dan style lainnya supaya lebih menarik lagi.

Terlebih lagi kan heading lebih sering digunakan sebab digunakan untuk meningkatkan SEO onpage blog kita. Jika dibandingkan dengan menggunakan font dengan ukuran large untuk judul maka lebih baik menggunakan heading (h2).

Keuntungan Yang Diperoleh 

Keuntungan apa yang dapat kita peroleh bila kita mengubah style dari heading blog (h2). Banyak keuntungan yang mampu kita dapatkan salah satunya yaitu membantu pengguna dalam berselancar di situs blog kita. Mereka jauh lebih mudah untuk memahami isi artikel yang ada. Karena ada pembagian adegan isi yang terang serta warna dan style antara isi dan judul. Bagaimana tampilan headingnya nanti?

Membuat heading supaya lebih keren sangatlah mudah anda hanya perlu menambahkan css kedalam template. Cara membuat heading h2 dengan css style keren.

Bagaimana cara membuat heading menyerupai diatas? Anda hanya perlu menambahkan css kedalam template dan tinggal membuat heading dipostingan blog untuk memanggil heading menyerupai diatas. Berikut caranya.

Cara Membuat Heading Keren 

Langkah 1
Silakan anda buka blogger ,pilih Template → Edit HTML

Langkah 2
Salin instruksi dibawah ini dan letakkan diatas instruksi </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:120%;font-weight:bold;text-align: left;color: #FF4F4F;font:#FF4F4F;} .post-body h2:before , .post-body h5:before , .post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#32CD32;width:7%;height:2px;}

  • Untuk mengganti ukuran heading silakan ubah 120% sesuka anda
  • Untuk mengubah warna font heading ganti kode #FF4F4F
  • Untuk mengganti warna garis bawah heading ganti kode #32CD32

Lalu Simpan template.

Silakan anda buat postingan dengan heading lalu coba pratinjau postingan tersebut untuk melihat apakah style heading anda sudah berubah. Cukup sekian tutorial yang mampu dibagikan biar membantu dan bermanfaat.