Mamank Dzgn : Cara Modifikasi Style Heading H2 Pada Postingan

Cara Modifikasi Style Heading H2 pada Postingan - Helo sobat, pada kesempatan kali ini aku akan membuatkan tutorial cara Modifikasi Tampilan Heading H2 pada Postingan, semoga heading pada postingan dan static page terlihat lebih rapih dan elegan.

Dengan cara ini, akan mengubah tampilan Heading dan menambahkan garis elegan di bawahnya, yang mulanya Heading hanya berukuran lebih besar dari font artikel dan memakai tag b atau bold. Kode CSS ini aku dapatkan dari inspect elment blog Arlina Design, alasannya yakni Arlina sendiri yang pertama memakai style ini pada blognya.

Keuntungan Modifikasi Heading H2

Keuntungan apa yang sanggup kita peroleh sehabis memodif Heading H2? Banyak laba yang sanggup kita dapatkan salah satunya yaitu lebih memudahkan pengunjung memahami isi artikel pada blog. Pengunjung jadi lebih gampang untuk memahami isi artikel yang ada, alasannya yakni ada pembeda antara tampilan heading dan isi konten.

Selain itu, dengan cara ini, tampilan postingan akan terlihat lebih rapih dan dan terstruktur. Berikut pola Heading H2 yang dimodifikasi dengan style tertentu.

Lalu bagaimana cara modifikasi Heading H2? Sobat hanya perlu menambahkan aba-aba css di template editor dan tinggal menciptakan goresan pena dengan fungsi heading di postingan atau static page. Untuk cara lengkapnya perhatikan tutorial berikut:

Cara Modifikasi Style Heading H2

Langkah Pertama
Buka Blogger >> Tema >> Edit HTML

Langkah Kedua
Salin aba-aba di bawah ini, lalu letakan sempurna di atas </style> atau ]]></: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:140%;font-weight:bold;text-align: left;color: #000000;font:#000000;} .post-body h2:before, .post-body h5:before, .post-body h6:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;}

Untuk mengganti ukuran heading silahkan ubah angka 140%
Untuk mengubah warna font heading silahkan ubah aba-aba #000000
Untuk mengubah warna garis bawah silahkan ubah aba-aba #019fcc

Langkah Ketiga
Simpan template, selesai

Sekarang silahkan teman buat postingan gres dengan menciptakan heading di dalamnya, lalu coba pratinjau postingan tersebut untuk melihat hasilnya. Apabila belum berubah, teman sanggup hapus style H2 sebelunya, yang tertera di template sobat.

Supaya style tersebut bekerja di device yang berukuran kecil, menyerupai hp atau tablet, teman tinggal menambahkan aba-aba di atas di media query tertentu, dan mengubah beberapa style hingga sesuai. Contoh aku meletakan aba-aba di atas pada media query 640px dan 480px, maka tampilannya akan menyerupai berikut.

@media screen and (min-width:480px) and (max-width:680px) { .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: #000000;font:#000000;} .post-body h2:before, .post-body h5:before, .post-body h6:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;}}

Nah itulah Tutorial Cara Modifikasi Style Heading H2 pada Postingan, selamat mencoba dan terima kasih. Jangan lupa berkomentar...