Membuat scroll bar pada widget blogger

Pasti temen-temen blogger pernah kan melihat scroll pada sebuah widget di blogspot, misal scroll label, scroll archive, atau penembatan scroll pada widget-widget yang lain.

Sebenernya untuk membuat sebuah scroll bar sangatlah mudah. Jadi begini tag untuk membuat suatu scroll ;

<div style="overflow:auto;width:auto;height:500px;padding:5px;border:1px solid #096DB0">
[coding disini]
</div>

Jadi sesuatu yang ingin anda beri scroll harus berada diantara code yang saya  beri warnah merah. Untuk mengatur area scroll tinggal ubah saja width:auto; untuk lebar (dalam scrip saya beri ancho = otomatis menyesuaikan jatah ) dan height:500px untuk mengatur tingginya.

OK. saya kasih sebuah contoh misal anda ingin memberikan scroll pada widget archive maka berikut scripnya ; {ini template standart bawaan blogger}

<div id='ArchiveList'>
<div style='overflow:auto; width:auto; height:400px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>

Nah, begitu ! mau contoh lagi ? OK misal pada widget label. Maka kita edit scripnya jadi seperti ini ;

<b:widget id='Label1' locked='false' title='categories-1' 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:auto; 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>
Jadi kurang lebih seperti itu. Kalau belum jelas silakan berikan komentar anda .