Home CSS Cara Mempercantik Tampilan Heading, Subheading dan Minor

Cara Mempercantik Tampilan Heading, Subheading dan Minor

by Erzed

Cara Memberikan gambar/ikon di samping tulisan H1, H2, H3 dsb. – Ok kali ini Blog hhandromax.com akan membahas salah satu cara untuk memperindah atau mempercantik tampilan Blog yaitu memberi Icon di samping tulisan yang di beri ukuran huruf Heading, Subheading dan Minor heading atau lebih tepatnya H1 to H6.

Cara Mempercantik Tampilan Heading, Subheading dan Minor 5

Biasanya Heading di pakai agar tulisan menjadi lebih tebal dan besar yang dimaksudkan supaya pengunjung dapat mengetahui apa yang dimaksudkan diblog atau Judul. Namun dengan mempercantik tampilan Heading akan menciptakan artikel anda semakin enak untuk dipandang dan kaya blog yang terdapat tampilan bagus memberi headingnya ikon. Ok langsung aja bila ingin demo tampilannnya seperti dibawah ini.

Cara Memperindah tampilan Heading

1. Pertama silahkan masuk ke akun blogger anda – Template dan Edit HTML.
2. Kemudian silahkan cari Kode h1, h2, h3,h4,h5,h6, sebagai contoh seperti dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{font-size:140%}
h4{font-size:130%;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

3. Sebagian besar template mempunyai Kode seperti diatas, namun cukup saja sedikit berbeda, silahkan cari saja dan apabila sudah ketemu hapus kode didalam kurung dan mengganti dengan kode CSS dibawah ini.

background:url(https://4.bp.blogspot.com/-lYJDETz79MI/VQbDENcmY1I/AAAAAAAAD7I/YG4SNv9dkIQ/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;

4. Maka Hasilnya seperti dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{background:url(https://4.bp.blogspot.com/-lYJDETz79MI/VQbDENcmY1I/AAAAAAAAD7I/YG4SNv9dkIQ/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h4{background:url(https://4.bp.blogspot.com/-lYJDETz79MI/VQbDENcmY1I/AAAAAAAAD7I/YG4SNv9dkIQ/s22/seocipsh3.png) no-repeat 5px 7px;font-size:130%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

Note : Silahkan mengganti heading yang kerap digunakan saja, biasanya Heading merupakan H2, Subheading : H3 dan Minor Heading : H4. Jangan anda pasang kesemua heading, sebab nantinya judulpun akan ada ikonnya. Terakhir silahkan mengganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon apabila perlu. Dan silahkan bereksperimen sendiri.

Baca :  Cara Mengaktifkan Meta Description Pada Blog

Demikian artikel tentang Cara Mempercantik heading dengan menambahkan ikon atau logo. sekian yang dapat admin bagikan dan Terima kasih.

You may also like