Cara Mempercantik Tampilan Heading, Subheading dan Minor

Cara Memberikan gambar/ikon di samping tulisan H1, H2, H3 dsb. - Ok kali ini Blog Espada 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.

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 membuat artikel anda semakin enak untuk dipandang dan banyak blog yang memiliki 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 mungkin saja sedikit berbeda, silahkan cari saja dan jika sudah ketemu hapus kode didalam kurung dan ganti dengan kode CSS dibawah ini.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfvPLei-fpUqS8lWIIYKv3xcQJ1Xv2pb5WvOe0UQn57pUdCSVrBaoM1fzzm0z86tHU8ycS84zYXjGBWZP42yKClXm9bvWoFRwWkmTytVF82IzCn0ypfwiBxXzfyUGy417zBPFE_yqzjQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfvPLei-fpUqS8lWIIYKv3xcQJ1Xv2pb5WvOe0UQn57pUdCSVrBaoM1fzzm0z86tHU8ycS84zYXjGBWZP42yKClXm9bvWoFRwWkmTytVF82IzCn0ypfwiBxXzfyUGy417zBPFE_yqzjQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfvPLei-fpUqS8lWIIYKv3xcQJ1Xv2pb5WvOe0UQn57pUdCSVrBaoM1fzzm0z86tHU8ycS84zYXjGBWZP42yKClXm9bvWoFRwWkmTytVF82IzCn0ypfwiBxXzfyUGy417zBPFE_yqzjQ/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 ganti heading yang sering digunakan saja, biasanya Heading adalah H2, Subheading : H3 dan Minor Heading : H4. Jangan anda pasang kesemua heading, karena nantinya judulpun akan ada ikonnya. Terakhir silahkan ganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon jika perlu. Dan silahkan bereksperimen sendiri.

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

Tweet