Add Variety Label for Blogger with Simple Snip

Dari tidak ada kerjaan, utak-atik variabel ordered dan unordered list, untuk diterapkan pada bagian label/kategori blog. Supaya berjalan mulus, konfigurasi label mesti memilih yang opsi List jangan yang Cloud.
Bila sudah benar configurasi yg terpasang, silahkan sobat lakukan Expand Widget Templates
Pertama-tama temukan kode ]]></b:skin> kemudian masukan kode snippet CSS berikut diatasnya/sebelumnya!
Click expand here to look CSS coded

.blogger- ul {
margin: 0;
list-style: none;
}
.blogger- ul li {
background: #EEE;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
padding: 5px;
}
.blogger- ul li:hover {
background: url("http://beben-koben.blogspot.com/favicon.ico") no-repeat 150px 7px #555;
text-shadow: 0 1px 0 #000;
}
.blogger- ul li:hover a {
color: #FFF;
display: block;
}

Kenapa disuruh dicentang, tidak lain sobat kembali harus menemukan kode label! Search for found it
<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Maka sobat akan dihadapkan seonggok kode seperti berikut:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data: display + &quot;-label-widget-content&quot;'>
  <b:if cond='data: display == &quot;list&quot;'>
    <ul>
    <b: loop values='data: labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data: label.url'>
          <span expr: dir='data:blog.languageDirection'><data: label.name/></span>
        <b:else/>
          <a expr: dir='data:blog.languageDirection' expr:href='data: label.url'><data: label.name/></a>
        </b:if>
        <b:if cond='data:showFreqNumbers'>
          <span dir='ltr'>(<data: label.count/> )</span>
        </b:if>
      </li>
    </b: loop>
    </ul>
  <b:else/>

. . .  . . .  . . .

Perhatikan tag <ul> yah :) Bubuhkan tagging pembuka ini sebelumnya/diatasnya <div class='blogger-'> dan tutup tagging dengan </div> sesudah/dibawah tag penutup </ul>

Final result will be look

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
   <h2><data:title/></h2>
 </b:if>
 <div expr:class='&quot;widget-content &quot; + data: display + &quot;-label-widget-content&quot;'>
   <b:if cond='data: display == &quot;list&quot;'>
<div class='blogger-'>
     <ul>
     <b: loop values='data: labels' var='label'>
       <li>
         <b:if cond='data:blog.url == data: label.url'>
           <span expr: dir='data:blog.languageDirection'><data: label.name/></span>
         <b:else/>
           <a expr: dir='data:blog.languageDirection' expr:href='data: label.url'><data: label.name/></a>
         </b:if>
         <b:if cond='data:showFreqNumbers'>
           <span dir='ltr'>(<data: label.count/> )</span>
         </b:if>
       </li>
     </b: loop>
     </ul>
</div>
   <b:else/>

. . .  . . .  . . .

SAVE.

Begitulah kira-kira bermain dengan kode widget label blog disnippet dengan CSS. Semoga bermanfaat :)
Happy stylish label \m/