Cara Mudah Menambahkan Icon Pada Label Post Otomatis di Blog

Muhammad Ali Tohiri - Bagaimana cara menambahkan icon pada label postingan?

Perlu anda ketahui, hal ini mungkin tidak terlalu penting, akan tetapi bagi publisher juga harus memperhatikan tampilan sebuah website agar pengunjung tertarik bahkan betah saat membaca artikel yang telah anda buat. Oleh karena itu saya akan membuat sebuah label dapat ditambahkan sebuah icon agar terlihat menarik. Berikut ulasannya.



Pertama, masuk Blogger

Kedua, menuju menu Tema - Edit HTML

Ketiga, cari kode CSS .label-info-th a. Kode ini ada dua, pilih saja yang kedua nanti Anda akan menemukan selector CSS padding: 8px 12px; jika sudah ketemu ganti dengan padding: 5px 10px 8px 0px; kurang lebih akan seperti ini

.label-info-th a {
    color: $(label.color);
    background: $(label.bg.color);
    display: inline-block;
/*padding: 8px 12px;*/
padding: 5px 10px 8px 0px;
 margin: 1px 0;
    font-size: 13px;
 font-weight: 500;
}

Ketiga, tetap pada kode CSS .label-info-tha a, letakkan kode CSS berikut ini tepat diatasnya

.label-info-th a:before{
content:'';
min-width: 23px;
min-height: 23px;
background-position:center;
background-repeat:no-repeat;
background-size:20px;
vertical-align:-7px;
display:inline-block;
}

.label-info-th a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5,19L8.34,12L3.5,5H14.5C15.17,5 15.72,5.3 16.13,5.86L20.5,12L16.13,18.14C15.72,18.7 15.17,19 14.5,19H3.5Z' fill='%23008080'/%3E%3C/svg%3E")}

.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}

Kurang lebih akan nampak seperti ini

.label-info-th a:before{
content:'';
min-width: 23px;
min-height: 23px;
background-position:center;
background-repeat:no-repeat;
background-size:20px;
vertical-align:-7px;
display:inline-block;
}

.label-info-th a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5,19L8.34,12L3.5,5H14.5C15.17,5 15.72,5.3 16.13,5.86L20.5,12L16.13,18.14C15.72,18.7 15.17,19 14.5,19H3.5Z' fill='%23008080'/%3E%3C/svg%3E")}

.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}

.label-info-th a {
    color: $(label.color);
    background: $(label.bg.color);
    display: inline-block;
/*padding: 8px 12px;*/
padding: 5px 10px 8px 0px;
 margin: 1px 0;
    font-size: 13px;
 font-weight: 500;
}

KETERANGAN:

Lihat kode CSS dibawah ini

.label-info-th a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}

Kode .islam adalah nama label. Sesuaikan dengan nama label Anda baik itu besar kecilnya.

Kode M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z adalah kode icon SVG. Anda bisa menyesuaikan icon tersebut dengan label.

Kode 008080 adalah kode warna icon, ganti saja kode warnanya sesuai dengan keinginan Anda. Untuk mendapatkan kode warna Anda bisa menuju tautan https://www.w3schools.com/colors/colors_picker.asp

Untuk mendapatkan kode ini Anda bisa ke tautan https://materialdesignicons.com. Klik aja icon yang diinginkan kemudian klik tanda </> dan pilih pilih View SVG dan terakhir cari kode d='xxxx'.

Keempat, jika Anda ingin menampilkan hanya satu label saja pada setiap tampilan postingan Home Page Anda bisa menambahkan kode CSS dibawah ini

.label-info-th a:not(:first-of-type){
display:none;
}

Jika tidak ingin, Anda bisa melewati langkah keempat ini

Kelima, cari kode <span class='label-info-th'> jika sudah ketemu tambahkan kode <b:class expr:name='data:label.name'/> tepat sebelum kode <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'>

Kurang lebih akan nampak seperti ini

<div class='label-line'>
  <span class='label-info-th'>
  <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'><b:class expr:name='data:label.name'/><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
  </span>
  </div>

Keenam, Save Template

Demo

Itulah cara menambahkan icon pada label postingan blog, berikan komentar anda dan semoga bermanfaat . . .

Muhammad Ali Tohiri

Saya adalah orang yang sedikit bicara. Karena saya tahu nggak banyak orang yang mau mendengarkan

Share this post

Related Post