Membuat CSS Jumlah Entri Pada Widget Label

Redi

Panduan Blog

Sabtu, 01 Februari 2014

Belum ada komentar

Membuat CSS Jumlah Entri Pada Widget Label - Kali ini saya akan membahas tentang pemberian jumlah entri pada widget di blog dengan menggunakan CSS , dalam widget label pada blog yang default pada umunya belum ada jumlah entri , maka dari itu saya akan memabagikan tutorialnya . oh ya untuk demo anda bisa lihat gambar di bawah ini :

Langsung saja berikut Cara Membuat CSS Jumlah Entri Pada Widget Label :

1. Langkah pertama adalah anda harus memasang widget label terlebih dahulu
2. Setelah anda memasang widget labelnya , kemudian pasang CSS dibawah ini tepat di atas  ni tepat di atas kode ]]></b:skin> atau </style>
   
   

   /* Widget label css keren*/
   #Label1 ul {list-style:none;padding:0;margin:0;color:#999}
   #Label1 li {border-bottom:1px solid #222;border-top: 1px solid #444; list-style:none;margin:0;padding:0}
   #Label1 li:first-child  {  border-top: 0;  }
   #Label1 li:last-child  {  border-bottom: 0;  }
   #Label1 li a {color: #eee;text-decoration:none;list-style:none}
   #Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}
   #Label1 li .label-counter {float:right;background-color:#444;color:#eee;line-height:1.2em;margin:2px 0 0;padding:3px 5px;border-radius:4px;text-align: center;font-size:12px;min-width:27px}
   #Label1 li:hover .label-counter {background:#20aea6;color:#ddd}



3. Kemudian langkah selanjutnya sobat cari kode
   
   

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



4. Ganti kode di atas dengan kode dibawah ini
   
   

   <span class='label-counter'><data:label.count/></span>



5. Simpan template dan lihat hasilnya :)

Oh ya , sobat juga dapat merubah warna background dan font atau lainya sesuai keinginan anda Pada CSS di atas ( label ini merupakan label yang digunakan oleh mbang taufiqurrohman di template DTE  )