Membuat Scroll Pada Arsip atau Archives

Yang di maksud Scrool pada arsip atau Archives adalah tampilan arsip dengan scrool untuk memudahkan para pengunjung unruk melihat semua isi postingan kita agar bisa betah berlama-lama membaca artikel atau apapun yang ada di blog kita. Walaupun mungkin sudah banyak sekali postingan yang membahas tentang hal ini tapi tidak ada salahnya kalau saya juga membahasnya. :D
Langsung saja kita lakukan langkah-langkah untuk membuat scrool pada archives :

     

1.     Login si Blogger.

2.     Dari dasbor klik Rancangan

3.     Klik Edit HTML.

4.     Centang Expand Template Widget.

5.     Cari kode <div id='ArchiveList'> menggunakan Ctrl+F pada keyboard agar mudah mencari.

Akan muncul kode seperti berikut:

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

Keterangan:

Kode yang dicetak tebal adalah kode yang dicari.

6.     Copy kode di bawah ini dan paste tepat di atas kode <div id='ArchiveList'>

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

7.     Lalu tambahkan kode </div> dtepat di bawah kode </b:includable> 

8.     Berikut adalah contoh kode arsip yang telah diterapkan dengan kode scroll.

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

Keterangan:

Kode yang dicetak tebal adalah kode yang dicari.

Kode warna merah adalah kode scroll.

9.      Klik Simpan Template.