Cara Membuat Design Widget Label Seperti Template Igniplex Di Viomagz

Kategori atau Label merupakan fitur yang bisa Anda gunakan untuk mengelompokkan konten artikel yang mempunyai kesamaan tema namun berbeda pada pembahasannya.

Lanjut ke Caranya...

1. Pertama buka Tema dan Edit HTML.
2. Tekan CTRL + F lalu cari kode .list-label-widget-content ul li dan hapus kode tersebut.

3. Kemudian copy kode CSS dibawah ini diatas kode ]]></b:skin>.

/* Design Label Igniplex */
.list-label-widget-content ul li a {
font-size: .85rem;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
text-align: center;
flex-grow: 1;
padding: 1px 5px;
}

.list-label-widget-content ul li {
list-style-type: none;
margin: 0px 5px 5px 0px;
border:none;
display: flex;
width: auto;
flex-wrap: nowrap;
align-items: center;
flex-grow: 1;
background-color: #1a73e8;
border-radius: 3px;
}

.list-label-widget-content ul {
   display: flex;
   flex-wrap: wrap;
}

.list-label-widget-content span {
background-color: rgba(0,0,0,.25);
color:#fff;
height: 100%;
font-size: .85rem;
display: flex;
align-items: center;
border-radius: 0px 3px 3px 0px;
transition: all .3s ease;
}

div.Label h2 {
  padding: 15px 0;
  text-indent: 20px;
  width: 100%;
  border-bottom: 1px dotted #dadada;
  margin-bottom: 5px;
  }

.widget-content.list-label-widget-content {
  padding: 12px;
}

4. Lompat ke Widget Label2 dan copy kode IKON SVG dibawah ini disamping <h2> taruh kode IKON SVG <data:title/></h2>.

<svg style="height: 24px; margin-right: 2px; vertical-align: -5px; width: 24px;" viewbox="0 0 24 24">
<path d="M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#1a73e8"></path>
</svg>

5. Konfigurasi Label.

5. Tekan save / simpan.