Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...

13 Februari 2010

Dropdown Label Kategori Blogspot

Blog dengan beragam tulisan yang dikelompokkan menjadi beberapa kategori, bisa jadi apabila menggunakan tampilan list label standar blogger akan menyita banyak tempat pada sidebar blog. Padahal jika dibuat lebih ringkas, sisa space sidebar dapat anda manfaatkan untuk widget informatif lainnya. Selain itu meringkas label list standar ke drop-down menu akan membuat blog anda kelihatan lebih rapi. Sebelum mulai ada baiknya backup dulu current template, selanjutnya ikuti step di bawah ini:


  1. Login ke account blogspot

  2. Klik pada tab 'Layout (Tata Letak)'

  3. Klik 'Edit HTML'

  4. Centang pada kotak check box 'Expand Template Widget'

  5. Temukan kode yang mirip (identik) dengan code di bawah:

    [html collapse="false"]
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    [/html]

    atau seperti ini:

    [html collapse="false"]
    <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>
    [/html]

    Hapus dan ganti kode di atas dengan kode di bawah ini;

    [html collapse="false"]
    <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'><option>Browse By categories</option>
    <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'><data:label.name/>
    (<data:label.count/>)
    </option>
    </b:loop>
    </select>
    [/html]



Klik pada tombol 'Simpan Template' (Save Template) dan lihat hasilnya.

Have fun...
:D

Tidak ada komentar:

Posting Komentar

Loncat ke Atas ↑