Cara Modifikasi Style Heading H2 pada Postingan

Kata Bijak Romantis Agustus 19, 2017 0

Cara Modifikasi Style Heading H2 pada Postingan - Helo sobat, pada kesempatan kali ini saya akan berbagi tutorial cara Modifikasi Tampilan Heading H2 pada Postingan, supaya 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 menggunakan tag b atau bold. Kode CSS  ini saya dapatkan dari inspect elment blog Arlina Design, karena Arlina sendiri yang pertama menggunakan style ini pada blognya.

Keuntungan Modifikasi Heading H2

Keuntungan apa yang dapat kita peroleh setelah memodif Heading H2? Banyak keuntungan yang bisa kita dapatkan salah satunya yaitu lebih memudahkan pengunjung memahami isi artikel pada blog. Pengunjung jadi lebih mudah untuk memahami isi artikel yang ada, karena ada pembeda antara tampilan heading dan isi konten.


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

Lalu bagaimana cara modifikasi Heading H2? Sobat hanya perlu menambahkan kode css di template editor dan tinggal membuat tulisan 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 kode di bawah ini, kemudian letakan tepat 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:'';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 kode #000000
Untuk mengubah warna garis bawah silahkan ubah kode #019fcc

Langkah Ketiga
Simpan template, selesai

Sekarang silahkan sobat buat postingan baru dengan membuat heading di dalamnya, kemudian coba pratinjau postingan tersebut untuk melihat hasilnya. Apabila belum berubah, sobat bisa hapus style H2 sebelunya, yang tertera di template sobat.

Supaya style tersebut bekerja di device yang berukuran kecil, seperti hp atau tablet, sobat tinggal menambahkan kode di atas di media query tertentu, dan mengubah beberapa style sampai sesuai. Contoh saya meletakan kode di atas pada media query 640px dan 480px, maka tampilannya akan seperti 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:'';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...