Cara Membuat Kategori Berwarna Diblog

Hy Guys di hari ini saya kembali share beberapa cara bagaimana membuat label kategori yang berwarna warni sapa tau kalian semua bosan dengan kategori yang polos alias hitam putih ...di kesempatan ini saya akan mencoba share sedikit pengetahuan saya bagaimana membuat widget Label Kategori berwarna warni speerti di sebelah kiri blog saya nampak kerenkan kkkk ayo kita bahas guys.

nah guys untuk merubah tampilan kategori berwarna kita harus menyisipkan dan menerapkan Css pada template kalian apabila sudah selesai menerapkan kategori kalian akan seperti ini.

Akan Terlihat seperti Ini

Nah mantapkan ...??? oke ayo kita mulai cara membuatnya

1. pertama silakan agan masuk ke Dasboard blog agan
2. setelah masuk Dasboard pilih Template  ====) klik Edit HTML

Nah Silahkan Agan copy-paste CSS Ini dan letakkan tepat diatas 

dan bisa juga diletakkan di atas  kalo saya meletakkannya di   
Semoga Berhasil Gan...

.cloud-label-widget-content {text-align: left;} .label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1) {background: #F86D9E;} .label-size:nth-child(2) {background: #37C371;} .label-size:nth-child(3) {background: #10BBEA;} .label-size:nth-child(4) {background: #25CBFE;} .label-size:nth-child(5) {background: #963690;} .label-size:nth-child(6) {background: #A3195C;} .label-size:nth-child(7) {background: #545454;} .label-size:nth-child(8) {background: #F2A15F;} .label-size:nth-child(9) {background: #00FF80;} .label-size:nth-child(10) {background: #B7860B;} .label-size:nth-child(11) {background: #99CC33;} .label-size:nth-child(12) {background: #FFFF3D;} .label-size:nth-child(13) {background: #3FDECF;} .label-size:nth-child(14) {background: #FF2F0A;} .label-size:nth-child(15) {background: #E9DB58;} .label-size:nth-child(16) {background: #42FFBD;} .label-size:nth-child(17) {background: #6899ED;} .label-size:nth-child(18) {background: #FF52AE;} .label-size:nth-child(19) {background: #8DBC2F;} .label-size:nth-child(20) {background: #80FF00;} .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-size:hover { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:hover .label-count, .label-size:focus+.label-count { background-color: #FF6BFF; }

Share this post