Membuat Scroll Down Menu untuk Label Blogspot

Bagi yang menggunakan platform Blogger/Blogspot, pasti memanfaatkan fasilitas label/category yang biasanya dipasang di sidebar. Masalah akan timbul untuk tema blog tertentu yang membutuhkan banyak label, sehingga sidebar bisa sangat memanjang ke bawah. Ambil contoh di blog selebritis manca, Sexy Celebs HQ, lihat di sidebar bagian “Celebrity List”. Pada blog ini satu nama artis diberi satu label tersendiri, yang akan memudahkan pembaca dalam browsing selebriti favorit mereka. Agar sidebar tidak terlalu panjang, maka perlu dibuatkan Scroll Down Menu untuk label tersebut.
Berikut ini adalah langkah-langkah untuk membuat Scroll Down Menu untuk Label pada Blogspot:
  1. Log-in ke account blogger.
  2. Masuk ke Design dan aktifkan widget “Label” dengan cara: Pilih Page Elements lalu Add A Gadget, pilih Labels. Kemudian Save.
  3. Masuk ke Edit HTML.
  4. Save dulu template anda, agar jika terjadi kesalahan, dapat mengembalikan ke kondisi semula. Klik Download Full Template.
  5. Kalo sudah, jangan lupa beri tanda “centang” disamping Expand Widget Templates.
  6. Find (tekan F3) kode HTML berikut ini:
    <b:widget id='Label1' locked='false' title='Categories' type='Label'>
    <b:includable id='main'>
     <b:if cond='data:title'>
     <h2><data:title/></h2>
     </b:if>
     <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 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 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>
    </b:includable>
    </b:widget>
    title=’Categories’ tergantung nama yang anda berikan untuk widget-nya. Misal title=’Celebrity List’.
  7. Hapus semua kode di atas dan gantikan dengan:
    <b:widget id='Label1' locked='false' title='Categories' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:100px;'>
    <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>
    </div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  8. Categories pada title=’Categories’ dapat anda ganti dengan judul sesuka anda.
    width:ancho, lebar widget akan menyesuaikan dengan lebar sidebar, bisa anda ganti sesuka anda dengan mengisi besarnya pixel (px).
    height:100px, tinggi widget. Jadi jika widget lebih dari 100px, baru scrollbar akan muncul. Besarnya bisa anda ganti sesuai keinginan.
  9. Klik Save/Simpan. Selesai.

Labels

 
Ziefie © 2011 DheTemplate.com & Main Blogger. Supported by Makeityourring Diamond Engagement Rings

You can add link or short description here