Tutorial Mempercantik Tampilan Heading, Subheading Dan Minor

Cara Memberikan gambar/ikon di samping goresan pena 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 goresan pena yg di beri ukuran abjad Heading, Subheading serta Minor heading atau lebih tepatnya H1 to H6.


Biasanya Heading di pakai supaya goresan pena menso lebih tebal serta besar yg dimaksudkan supaya pengunjung sanggup mengetahui apa yg dimaksudkan diblog atau Judul. Namun dengan mempercantik tampilan Heading akan menciptakan artikel anda semakin yummy untuk dipansertag serta banyak blog yg mempunyai tampilan bagus memberi headingnya ikon. Ok pribadi aja bila ingin demo tampilannnya menyerupai dibawah ini.

Cara Memperindah tampilan Heading


1. Pertama silahkan masuk ke akun blogger anda - Template serta Edit HTML.
2. Kemudian silahkan cari Kode h1, h2, h3,h4,h5,h6, sebagai tumpuan menyerupai 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 menyerupai diatas, namun mungkin saja sedikit berbeda, silahkan cari saja serta bila sudah ketemu hapus arahan didalam kurung serta ganti dengan arahan CSS dibawah ini.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/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 menyerupai 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/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/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/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/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 yg sering dipakai saja, biasanya Heading yaitu H2, Subheading : H3 serta Minor Heading : H4. Jangan anda pasang kesemua heading, alasannya yaitu nantinya judulpun akan ada ikonnya. Terakhir silahkan ganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon bila perlu. Dan silahkan bereksperimen sendiri.

Demikian artikel ihwal Cara Mempercantik heading dengan menambahkan ikon atau logo. sekian yg sanggup saya bagikan serta Terima kasih.

Artikel Terkait