Cara Modifikasi Style Heading H2 pada Postingan - Hallo sahabat Buana, Pada Artikel yang anda baca ini dengan judul Cara Modifikasi Style Heading H2 pada Postingan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. Selamat membaca.

Judul : Cara Modifikasi Style Heading H2 pada Postingan
link : Cara Modifikasi Style Heading H2 pada Postingan

Cara Modifikasi Style Heading H2 pada Postingan

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

Demikianlah Artikel Cara Modifikasi Style Heading H2 pada Postingan

Sekian tutorial Cara Modifikasi Style Heading H2 pada Postingan Mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya. Dan jangan lupa share tutorial ini agar semakin berguna bagi orang banyak

Anda sekarang membaca artikel Cara Modifikasi Style Heading H2 pada Postingan dengan alamat link https://agus-uad.blogspot.com/2017/08/cara-modifikasi-style-heading-h2-pada.html

Admin

Smart Blogging - Blogger Gila Yang Suka Berbagi.

Facebook

WhatsApp

Instagram

Twitter

Youtube

Share this post

Subscribe Our Newsletter

Related Posts