Widget Blog - Cara Membuat Widget Label Blog Keren

Widget label atau kategori blog merupakan widget yang wajib dipasang di blog kamu guna mempermudah para visitor menemukan konten yang dia inginkan. Tapi, biasanya ni guys, tampilan widget label bawaan blog biasanya kurang menarik. Nah, untuk itu Gomu Gomu Ku akan share ke kamu cara membuat widget label blog keren..

Untuk tampilan widget yang akan kita buat, seperti dibawah ini guys...ok langsung saja ke langkah pertama...

Style 1

1. Login ke dashboard blog kamu

2. Plih menu Tata Letak => Tambah Gadget => Label

3. Kemudian setting sesuai keinginan kamu (catatan : tamilan wajib "cloud")

4. Kemudian Save/Simpan

5. Kemudian kembali ke dashboard blog kamu

6. Pilih menu Template => Sesuaikan => Tingkat Lanjut => Tambahkan CSS

7. Tempatkan Kode Script dibawah ini pada kolom yang telah disediakan

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset #0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

8. Klik Terapkan Tema dipojok kanan atas
9. Refresh halaman blog kamu untuk melihat hasilnya..

Style 2

Untuk style ke-2 langkah-langkahnya sama dengan yang diatas, tinggal kamu ganti kode scriptnya dengan kode dibawah ini...

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{background:#08A2FA;border-radius:30px;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

Style 3

Untuk style ke-3 langkah-langkahnya sama dengan yang diatas, tinggal kamu ganti kode scriptnya dengan kode dibawah ini...

.label-size a { font-size: 14px!important; padding: 1px 6px; border-top: 1px solid #CACACA; border-left: 4px solid #00A8FF; margin-bottom: 5px; float: left; margin-right: 5px; background: #F5F5F5; border-right: 1px solid #CACACA; border-bottom: 1px solid #CACACA; } .label-size a:hover { border-left: 2px solid #222222; border-right: 3px solid #222222; background: #fff; }

Catatan : di dalam kode script tersebut kalau kamu perhatikan ada kode "#" yang diikuti dengan angka atau hurif. Itu merupakan kode warna tampilan label. Kamu bisa menggantinya dengan code warna sesuai selera kamu. Untuk kode warna akan Gomu Gomu Ku bagikan dilain waktu..

Ok guys, sampai disini dulu Artikel kali ini, jangan lupa dishare ya...
Sampai ketemu di Artikel selanjutnya...
Salam.. Happy Blogging...