Cara Membuat Widget Label Keren dan Simpel di Blogger

Membuat atau memasang widget label pada blog memudahkan pengunjung untuk membaca artikel sesuai dengan kategori yang di inginkan. Label salah satu widget yang sangat di butuhkan dalam sebuah blog. Label dalam blog secara otomatis sudah mengelompokkan artikel yang sudah kita buat sesui dengan topik atau kategori masing" tinggal kita ketik nama label yang ingin kita baca. Selain itu blog yang kita miliki akan tersusun rapi dan kelihatan cantik.

Sesui dengan judul artikel kali ini cara membuat widget label blog menjadi keren dan kelihatan simpel. Untuk kalian yang menggunakan template VioMagz dari Mas Sugeng mungkin bisa langsung terapkan cara ini. Ok langsung saja simak tutorial berikut ini.

Cara Membuat Widget Label Keren dan Simpel Di Blogger

1. Login ke Blog anda.

2. Masuk ke menu Tema klik Edit HTML.

3. Pada area HTML Tema, cari dan temukan kode ]]></b:skin>. Untuk mempermudah pencarian, gunakan tombol Ctrl+F di keyboard komputer Anda. Pada kolom pencarian, tuliskan kodenya kemudian Enter.

4. Copy kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin>.

/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
 font-size:100%;
 opacity:10
}
.cloud-label-widget-content {
 text-align:left;
}
.label-size {
 background: #fff;
 transition: all 0.25s;
    -moz-transition: all 0.25s;
    -webkit-transition: all 0.25s;
 line-height:1.2;
    display: block;
    float: left;
    margin: 0 6px 6px 0;
    color: $(body.link.color);
    font-size: 13px;
    border-radius: 30px;
}
.label-size a,.label-size span{
 display: inline-block;
 color: $(label.color);
 padding: 8px 12px;
 border-radius: 30px;
    border: 1px solid #466e9c;
}
.label-count {
 margin-left: -12px;
    margin-right: 0px;
}

.list-label-widget-content ul {
 font-size: .9rem;
    -moz-column-count: 2;
    -moz-column-gap: 8px;
    -webkit-column-count: 2;
    -webkit-column-gap: 8px;
    column-count: 2;
    column-gap: 8px;
}

.list-label-widget-content ul li {
 padding-bottom: 5px;
 margin: 0 0;
 padding-top: 5px;
}

.bellow-header-widget .cloud-label-widget-content {
}

.bellow-header-widget .cloud-label-widget-content .label-size {
 font-weight: bold;
}
.bellow-header-widget .cloud-label-widget-content .label-size a, .bellow-header-widget .cloud-label-widget-content .label-size span {
 padding:  15px 20px;
}

Untuk mengubah warna tepi silahkan cari kode border: 1px solid #466e9c; dan ganti #466e9c sesuai dengan warna kesukaan kalian.

5. Simpan Tema dan selesai.

Untuk Menerapkan Widget Label Pada Blog

1. Masuk ke menu Tata Letak.

2. Tambah gadget widget label.

3. Silahkan edit dan lakukan konfigurasi seperti gambar berikut ini, setelah itu klik Simpan.

4. Selesai silahkan lihat hasilnya.

Sebenarnya cukup mudah tutorial dari saya cara membuat widget label keren dan simpel di blog. Sekian dari saya jika artikel ini bermanfaat jangan lupa share ke teman-teman kalian. Selamat mencoba.

Bape Wibu

Seseorang yang ingin sukses. Bayangin aja dulu kenyataannya belakang.

Facebook

Instagram

Cara Membuat Widget Label Keren dan Simpel di Blogger

Iklan Atas Artikel