Bagi sobat modif yang suka banget kepada widget archive bawaan dari blogger, pasti sudah tahu kalau punya banyak postingan pasti bentuknya jadi memanjang ke bawah. Apa gak risih tuh? Apa gak ngabisin ruang side bar? Nah alternatifnya, bagaimana kalau panjangnya dibatasin sekaligus dibuatin scroll. Dengan demikian panjang widget ke bawah bisa dibatasin.

Berikut tutorialnya:




A. MENGGUNAKAN HTML

1. Pastikan widget archive dari blogger sudah dipasang.
2. Pergi ke Edit HTML. Jangan lupa centang expand template widget
3. Cari kode berikut ( pake Ctrl + F biar gampang )

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

4. Lalu letakkan kode ini diantara kode di atas

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

</div>

Biar lebih jelas, kayak gini ni jadinya

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

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

5. Ganti 300 dengan yang dikehendaki. 300 itu maksudnya tinggi. Aturlah sesuai kebutuhan..
6. Tinggal disave and lihat dech sekarang tampilan widget archivenya..

Gampang kan??


B. MENGGUNAKAN CSS 


1. Log in ke blogger dan langsunglah menuju ke menu Edit HTML
2. Disarani sobat modif back up dulu templatenya dengan mendownloadnya. Ntar klw ada kesalahan bsa di upload lagi
3. Centang expand template widget
4. Cari kode berikut:

]]></b:skin>

5. Setelah dapat tu kode, tambahin kode di bawah ini setelah kode di atas

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Biar lebih jelas, kayak gini jadinya :

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

]]></b:skin>

6. Ganti 200 dengan angka yang diinginkan. 200 tersebut adlah nilai dari atribut height yang berarti tinggi widget. Save, lalu perhatikan apa yang terjadi.





Pilihlah salah satu cara dari penjelasan di atas menggunakan HTML atau CSS. Salam blogger tutorial !!