Cara Membuat Widget Label Keren Di Blog - Dari beberapa widget yang ada di blog, salah satu yang memiliki peranan cukup penting adalah widget label. Fungsi utamanya adalah untuk menampilkan kategori-kategori yang ada di blog, sehingga mempermudah para pengunjung blog mengetahui atau menemukan artikel yang mereka cari.
Secara default Blogger sudah menyediakan widget label untuk blogspot, namun untuk mempercantik tampilannya, Anda diperbolehkan melakukan modifikasi widget label yang sudah ada. Berikut ini cara merubah tampilan widget label blog Anda menjadi lebih menarik :
1. Login ke blog Anda.
2. Masuk ke menu "Tata Letak".
3. Jika blog Anda sudah terpasang widget label, silahkan edit dan lakukan konfigurasi seperti gambar berikut ini, setelah itu klik Simpan.
4. Selanjutnya masuk ke menu "Tema", kemudian klik "Edit HTML".
5. 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.
6. Copy salah satu kode yang Anda inginkan di bawah ini, kemudian pastekan tepat di atas kode ]]></b:skin>
/* Widget Label Keren*/ .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:#076BB8; 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:#333333; } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }
/* Widget Label Keren */ .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-radius:30px; background:#076BB8; 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 { border-radius:30px; background:#333333; } .label-count { white-space:nowrap; border-radius:30px; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }
/* Widget Label Keren */ .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:#076BB8;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:active{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
- Ganti warna background:#076BB8 , sesuai dengan yang Anda inginkan.
7. Setelah selesai menempatkan kode, klik "Simpan tema".
8. Selesai, silahkan lihat hasilnya.
Demikian Cara Membuat Widget Label Keren Di Blog yang bisa Anda lakukan. Sekarang label blog Anda menjadi keren. Semoga bermanfaat.
Share artikel... !
