• 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='&quot;label-size label-size-&quot; + 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>
    .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;}
    10. Lalu simpan

    0 komentar:

    Posting Komentar

  • Next Prev