Membuat Label Tertata Rapi Dengan Box CSS

Haloo saudara saudara sekalian.... wah kayaknya hampir 1 tahun nih bosengaptek ga update blog, hehehee.. tapi tenang, mulai sekarang bosengaptek bakal di update lagi kok.. hehehe...


oke next kembali ke judul " Membuat Label Tertata Rapi Dengan Box CSS " , hmmm... mungkin jika anda belum tau maksudnya... nih langsung saja BOS GAP kasih gambarannya :

:
iya betul !! kira kira seperti itulah saudara saudara... so ? mari kita coba...


sebelum melakukan langkah-langkah dibawah ini sebaiknya delete atau remove dulu widget "label/category" yang ada di blog anda.
langkah yang pertama adalah cari kode ]]></b:skin> (untuk mempercepat gunakan alt+f)
kemudian copy dan pastekan kode CSS dibawah ini di atas  ]]></b:skin> yang tadi sudah kita cari.

#textwidget {
    color: #070c65;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #080e76;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #e9e9e9;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #e9e9e9;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #030632;
    border-color: #000998;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000000;
    border-color: #000443
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000000
}

Nah jika sudah, kemudian cari lagi kode </b:widget>
copy dan pastekan kode dibawah ini, dibawah kode </b:widget> tersebut.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<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 class='tag' 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/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget> 

apa semua kode sudah terpasang..? sebaiknya " PREVIEW " dulu blog anda, setelah anda melihat Label Box CSS terpasang di blog, save template anda, kemudian atur sendiri letak widget Label Box CSS tersebut dengan cara masuk ke Rancangan>>Elemen Laman.. daaan...... selamat !! anda telah sukses Membuat Label Tertata Rapi Dengan Box CSS . hehehe... mudah kan..? okee.. semoga berhasil saudara saudara....

Terimakasih sudah membaca artikel tentang Membuat Label Tertata Rapi Dengan Box CSS anda bisa menemukan artikel ini melalui URL http://bosengaptek.blogspot.com/2012/07/membuat-label-tertata-rapi-dengan-box.html. dan saya berharap semoga artikel Membuat Label Tertata Rapi Dengan Box CSS ini bermanfaat bagi anda yang membutuhkan. Terimakasih...

Baca juga yang lain :