Cara Membuat Fungsi Scroll Pada Archive Blog

Jika kita telah memiliki banyak sekali posting-an didalam blog kita maka tentunya jumlah archive akan panjang dan kurang enak untuk dilihat. Salah satu cara-nya men-siasati hal ini adalah dengan membuat tampilan archive blog kita menjadi tampilan scroll.

Untuk membuat-nya cukup mudah, ikuti langkah-langkah berikut:

1. Login ke blog anda ---> Dashboard ---> Design ---> Page Element

2. Kalau yang telah mempunyai arsip blog tinggal memastikan pengaturannya dengan Gaya Hierarki. Namun bagi yang belum punya, Klik Tambah Gadget lalu pilih menu Arsip Blog dengan jenis pengaturan yang sama yaitu menggunakan Gaya Hierarki (seperti terlihat pada gambar dibawah ini)

 

3. Klik Edit HTML --> centang Expand Widget Template, kemudian cari kode berikut ini :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
atau
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> 
atau  
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'> 
atau kode yang mirip. 

Kode lengkapnya adalah seperti terlihat dibawah ini:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div style='overflow:auto; width:230px; height:300px;'>
  <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>
</b:widget>

Perhatikan kode yang berwarna merah diatas, kode tersebut adalah kode yang ditambahkan agar fungsi scroll dapat berfungsi pada Blog Archive, parameter width dan height adalah lebar dan tinggi blog archive scroll tersebut yang bisa diatur sesuai keinginan anda.