Membuat scroll bar pada Arsip dan Label blogger

Untuk menghemat ruang pada tampilan blog ,ada baiknya kita menbuat scrool pada widget-widget Sobat Blogger. Sebenarnya penulis ingin membuat auto scroll itu tuh,yang widgetnya bisa berjalan keatas .
Tapi karena tidak ketemu,ya sudah ,penulis memakaikan scrool manual di widget nya. Penerapannya bisa dilihat di sini . Disana saya memakainya untuk diterapkan pada widget Arsip Blog.Sebnarnya untuk membuat scrool bar sangatlah mudah. Scrip dasarnya adalah begini :

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

Ket: yang berwarna merah adalah script dasar, dan warna kuning adalah atribut.Bisa sobat atur sesuai kebutuhan. Width=ancho=otomatis ,jadi lebarnya disesuaikan otomatis. Ketinggian nya dan yang lain juga bisa sobat atur sendiri. 

Contoh membuat Scrol pada Arsip. 

<div id='ArchiveList'><div style='overflow:auto; width:ancho; 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>

Ket: Kode warna merah adalah penempatan tag scrool . 

Penerapan pada Label.

<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: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>

Bagi anda yang sudah memahami dan mahir dalam olah HTML, saya yakin trik ini pasti sudah sangat mudah untuk diterapkan. Tapi yang masih newbie (seperti penulis) ,musti ati-ati biar pas penempatannya. Bagi yang mau mempraktekkan trik ini,sebaiknya di download dulu template nya sebelum beraksi. Dan di preview dulu sebelum di save. Percayalah, utak-atik html itu mengasyikan. Cuman kalo udah stes,mending ditinggal aja,bisa-bisa tambah stes  ^_^ 

See you...