cara membuat labels sidebar atau footer menjadi menarik
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;}
Senin, 15 Juni 2015
Langganan:
Postingan (Atom)
0 komentar:
Posting Komentar