Sabtu, 08 Oktober 2011

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/

Tidak ada komentar:

Posting Komentar