Cara Membuat Blog Archive dengan Efek Scroll

Blog archieve atau arsip blog yang mengunakan pilihan hierarki biasanya akan memanjang tak beraturan, sesuai dengan jumlah artikel yang kita publish tiap bulannya (bisa juga mingguan, tergantung pilihan kita). Tentu saja ini akan sedikit mengganggu penampilan blog kamu karena panjang sidebar menjadi tidak menentu. Untuk itulah perlu dibuatkan scroll agar panjangnya tetap sesuai aturan yang kita buat.

Untuk membuat scroll pada blog archieve ini tidak jauh beda dengan membuat scroll pada gadget blogger/blogspot yang lain, yaitu sebagai berikut:

1. Masuk dulu ke Acount Blogger atau Dashboard
2. Pilih Layout , lalu klik Edit HTML
3. Centang dulu  Expand Widget Templates
4. Cari kode yang seperti ini : <div id='ArchiveList'>  atau kata Archive.
5. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
6. Kalau sudah,  tambahkan kode warna merah itu sebagai scollnya
7. Lengkapnya kode tersebut seperti dibawah ini :

   <h2><data:title/></h2>
     </b:if>
     <div class='widget-content'>
   <div style='overflow:auto; width:ancho; height:200px;'>
     <div id='ArchiveList'>
     <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>
   </b:includable>

   
   atau dengan cara yang ini :
   
   
   • Dari halaman dasbor, klik Tata Letak - Edit HTML.
   • Beri tanda centrang pada Expand Template Widget.
   • Kemudian cari kode type='BlogArchive' .
   • Perhatikan kode yang ada di bawahnya, seperti ini:
     

     <b:includable id='main'>
     <b:if cond='data:title'>
     <h2><data:title/></h2>
     </b:if>
     <div class='widget-content'>
     <div id='ArchiveList'>

   • Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:
     

     <b:includable id='main'>
     <b:if cond='data:title'>
     <h2><data:title/></h2>
     </b:if>
     <div class='widget-content' style='overflow:auto; height:200px'>
     <div id='ArchiveList'>

8. Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.
9. Mungkin saja diblog sobat kodenya beda,,  Oleh karena itu carilah yang mirip dan perlu dicoba, terus jangan lupa templatenya dibackup dulu.
10. Kalau sudah jangan lupa save template .
11. Selesai.

Hasil akhirnya adalah seperti ini :