Membuat Scroll pada Widget Archive Default Blogger

Bagi sobat blogger yang seneng banget ma widget archive bawaan dari blogger, pasti dah tahukan kalau punya banyak postingan pasti bentuknya jadi memanjang ke bawah. Apa ga risih tuh? Apa ga ngabisin ruang side bar tuh? Hhmmmm, ane punya alternatif nie, gimana kalau panjangnya dibatasin sekaligus dibuatin scroll.. Hmmm manteb thu.. Kan lumayan side barnya bisa dipake ma widget ataupun gadget yang lainnya..

Nah,, karena mantebbb tuh, langsung aja kita ke 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 blogger 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.

Sebagai penjelasan:

# Tutorial di atas akan bekerja jika sobat blogger sudah membuatkan widget archive tersebut terlebih dahulu

# Tutorial di atas akan berlaku jika sobat blogger hanya punya satu widget archive. Jika punya dua, ganti

#BlogArchive1 .widget-content{ 

dengan

#BlogArchive2 .widget-content{

 Pilihlah salah satu cara dari penjelasan di atas. Apa pake HTML atau CSS? Trus jangan lupa d share d sni.
Salam blogger tutorial !!

sumber