Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz

Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz


Pelajar Design - Pada kesempatan ini saya akan membagikan Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz. Sebenarnya widget label yang disediakan oleh blogger sudah ada namum tampilannya kurang menarik, dengan adanya tutorial ini saya akan memberi sedikit yang saya tahu tentang Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz.

Label merupakan fitur yang bisa digunakan untuk mengelompokkan konten artikel yang kita buat. Nah untuk caranya silahkan simak dibawah ya.

Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Masuk pada menu TEMA > klik Edit HTML.
3. Selanjutnya cari kode ]]></b:skin&gt dan pastekan kode di bawah ini tepat DIATAS kode tersebut.

/* Design Label Igniplex */
.list-label-widget-content ul li a {
    font-size: .85rem;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
    flex-grow: 1;
    padding: 1px 5px;
    font-weight: 700;
}
.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: #0c54c1;
    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: 145%;
    font-size: .85rem;
    display: flex;
    align-items: center;
    border-radius: 0px 3px 3px 0px;
    transition: all .3s ease;
    padding: 0px 7px;
}
div.Label h2 {
    text-indent: 20px;
    margin-bottom: -6px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: none;
    width: 100%;
    padding-bottom: 15px;
    padding-top: 15px;
    font: 400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;
    color: #fff;
    text-align: left;
    background: #0c54c1;
    background-image: linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2));
}
.widget-content.list-label-widget-content {
  padding: 13px;
  background: #0c54c15e;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

4. Silahkan cari kode dibawah ini dan hapus kode tersebut.


.artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before {
    content: "\f14b"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-right: 6px;
    color: $(body.link.color);
}


.list-label-widget-content ul li::before {
    content: "\f07b"; 
}

5. Jika sudah silahkan simpan dan lihat hasilnya.

Untuk memunculkan widget label yang telah dibuat tadi silahkan kamu masuk ke TATA LETAK > WIDGET SIDEBAR > LABEL, kemudian kamu setting dan konfigurasi seperti gambar dibawah ini.
Gambar Dari Jagoandzgn

Bagaimana tutorial tentang Cara Membuat Widget Label Mirip Seperti Igniplex Pada Viomagz. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

You may like these posts