Laman

Tampilkan postingan dengan label Cara Mudah Membuat Categories Roll. Tampilkan semua postingan
Tampilkan postingan dengan label Cara Mudah Membuat Categories Roll. Tampilkan semua postingan

Minggu, 22 Mei 2011

Cara Mudah Membuat Categories Roll

Share Cukup menghabiskan banyak space di sidebar tentunya jika jumlah kategori/label dalam post terlalu banyak.
Sebagai solusinya maka kita edit/ubah label kategori tersebut menjadi Categories roll. Maksudnya supaya kategori/label dapat diroll atau digeser naik turun, sehingga tidak memakan space yang seharusnya bisa dimanfaatkan untuk widget lain. Seperti yang diterapkan pada blog ini.

Berikut caranya :
  1. Pastikan Anda sudah menambahkan widget Label
  2. Untuk memudahkan proses pengubahan, ubah nama widget label tersebut menjadi "Categories" dan jangan lupa simpan
  3. Kemudian masuk di Layout --> Edit HTML pada template blog anda.
  4. Jangan lupa klik "Expand Widget Templates"
  5. Kemudian cari atau CTRL+F dan ketikan categories (sesuai step no.2), Akan tampil :
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>

  • Tambahkan kode berikut dibawah kode tadi :
<div style='width:100%; height:150px; overflow:auto;'>
<font size='2'>

  • Kemudian sebagai penutup kode, sesuai dengan tag div dan font (untuk memudahkan proses close tag saya) maka Anda tambahkan kode dibawah ini, di atas kode </b:includable>, tepatnya antara </b:includable> dan </div> :
</font>
</div>


Source lengkapnya Seperti ini :
<b:section class='sidebar-left' id='sidebar-left' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>

<div style='width:100%; height:150px; overflow:auto;'>
<font size='2'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url + &quot;?max-results=50&quot;'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url + &quot;?max-results=50&quot;'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

</div>
</font>
</div>
</b:includable>

Anda bisa mengubah tinggi rendahnya dengan mengubah nilai pada kode yang tersorot biru di atas.