Cara Membuat Widget Label Seperti Igniplex di Viomagz

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Widget Label Seperti Igniplex di Viomagz, tutorial kali ini saya mengambilnya dari sebuah blog / template yaitu Igniplex dan tutorial ini hasil gabungan dari popular post sebelumnya memiliki kesamaan.


Label merupakan fitur yang bisa kamu gunakan untuk mengelompokkan konten artikel yang mempunyai kesamaan tema namun berbeda pada pembahasannya. Nah untuk tutorialnya silahkan kamu simak artikel beriku ini.

Cara Membuat Widget Label Seperti Igniplex di Viomagz

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML.
3. Selanjutnya cari kode berikut ini ]]></b:skin> dan paste dibawah 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. Kalau sudah silahkan cari kode dibawah ini dan ubah kode tersebut dari FALSE ke TRUE.

<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>

5. Selanjutnya, silahkan kamu cari kode berikut ini dan hapus kode (.......) tersebut.

<span dir='ltr'>(<data:label.count/>)</span>

6. 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"; 
}

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Untuk memunculkan widget tersebut kamu cukup masuk ke TATA LETAK > Widget Sidebar > Label, Kemudian kamu setting dan konfigurasi seperti gambar dibawah ini.



Bagaimana mudah bukan untuk tutorial Cara Membuat Widget Label Seperti Igniplex di Viomagz, untuk demonya silahkan kamu klik tombol demo diatas apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    1. Nice seperti tutorial di blog nya mas anoy

      BalasHapus
      Balasan
      1. Agak beda bang, kalau ini hampir sama dengan igniplex

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel