This is BizOppers
Online Job for All. Work from home computer.

30 Nov 2011

Cara Membuat Kotak Label Dengan Scroll

Setiap blogspot pasti memiliki "Labels / Kategori" postingan yang sangat banyak, sehingga akan memakan sidebar yang cukup banyak jika kita tampilkan pada sidebar website atau blog kita, namun hal tersebut bisa diatasi dengan memberikan fungsi scroll box pada widget label tersebut. untuk membuatnya cukup mudah, sobat ikuti saja langkah-langkah dibawah ini



- Seperti biasa sobat Log in ke blogger
- Masuk ke rancangan - Edit HTML [jangan lupa centang kotak expand template widget]
- Cari kode dibawah ini

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>  
 
- Setelah ketemu kode tersebut, sekarang sobat copy dan paste kode dibawah ini tepat dibawah kode yang telah dicari tadi

<div style='overflow:auto; width:ancho; height:250px;'>

- Selanjutnya Scroll kebagian bawah sedikit dan temukan kode </b:includable>
- Setelah itu sobat copy dan paste kode dibawah ini tepat diatas kode tersebut
</div>

Simpan template dan silahkan lihat hasilnya

Untuk lebih jelasnya penempatannya sebagai berikut :

<b:widget id='Label1' locked='false' title='Kategori' 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;'>
<div style='overflow:auto; width:ancho; height:250px;'>
<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>
</div> </b:includable>
</b:widget>
Setiap template mempunyai karakter yang berbeda, patokannya adalah script

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Saya kira itu cukup sekian pelajaran blog kali ini, terima kasih. Applause




Artikel Terkait :
Komentar Terbaru

Tidak ada komentar:

Posting Komentar