Yo kali ini saya akan membagi ilmu tentang cara membuat labels sidebar atau footer menjadi menarik pada background tulisan, contohnya seperti dibawah ini
1. buka blog anda
2. klik tata letak => lalu cari labels => klik edit
3. centang tampilan jumlah entri per label seperti gambar di bawah ini => lalu Simpan
4. Buka Template => lalu Edit HTML
5. Cari title='Labels' => Lalu cari kode seperti di
bawah ini
6. Ganti dengan html
di bawah ini
<b:loop values='data:labels' var='label'><span class='label-size'><b:if cond='data:blog.url == data:label.url'><a expr:dir='data:blog.languageDirection'><data:label.name/></a><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 class='label-count' dir='ltr'>(<data:label.count/>)</span></b:if></span></b:loop>
7. Cari code seperti di
bawah ini
8. Ganti dengan kode
HTML di bawah ini
<span expr:class='"label-size label-size-" + data:label.cssSize'><b:if cond='data:blog.url == data:label.url'><a expr:dir='data:blog.languageDirection'><data:label.name/></a><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 class='label-count' dir='ltr'>(<data:label.count/>)</span></b:if></span>
9. Tambahkan css di
bawah ini sebelum kode ]]></b:skin>
10. Lalu simpan.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {font-size: 100%;filter: alpha(100);opacity: 10;}.label-size a, .label-size span {display: inline-block;color: #ffffff !important;padding: 6px 8px;font-weight: bold;}.label-size:hover {background: #333333;}.label-size {background: #666; display: block; margin: 0 3px 3px 0; color: #ffffff;font-size: 11px;text-transform: uppercase;}.label-count {float: right;white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333333;color: #fff !important;width: 25px;text-align: center;}
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar