Sunday, March 10, 2019

Sekilas Gosip Trik 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 yang di beri ukuran karakter Heading, Subheading dan Minor heading atau lebih tepatnya H1 to H6.

Biasanya Heading di pakai supaya goresan pena menjadi lebih tebal dan besar yang dimaksudkan supaya pengunjung sanggup mengetahui apa yang dimaksudkan diblog atau Judul. Namun dengan mempercantik tampilan Heading akan menciptakan artikel anda semakin yummy untuk dipandang dan banyak blog yang 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 dan Edit HTML.
2. Kemudian silahkan cari Kode h1, h2, h3,h4,h5,h6, sebagai pola 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 dan kalau sudah ketemu hapus isyarat didalam kurung dan ganti dengan isyarat CSS dibawah ini.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/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/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/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/AVvXsEhOATc8zcYTdtiSp4aNObiZjVcSVT6zCpHqhANEXFBuu-sxlLNw5AdVFFs5Hb2iMDgZPp2id9n4jeYJExNBE77RonNanq0Ly5qzAjtFENa1vsH-PxV3U73GRyYLAjwpLdMK4fPZub-6oN4/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 dipakai saja, biasanya Heading yakni H2, Subheading : H3 dan Minor Heading : H4. Jangan anda pasang kesemua heading, sebab nantinya judulpun akan ada ikonnya. Terakhir silahkan ganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon kalau perlu. Dan silahkan bereksperimen sendiri.

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

No comments:

Post a Comment