Cara Membuat Scroll Pada Gadget Arsip Blogger

Untuk saya kali ini, yang akan membahas tentang cara membuat scroll pada gadget arsip blogger, sebenarnya seberapa pentingkah membuat scroll pada gadget blog mu? sccroll ini berfungsi untuk mengefesienkan arsip yang memanjang ke bawah agar tidak memakan tempat terlalu banyak.

Dengan scroll di gadget arsipmu bisa meminimalkan gadget arsip karena memakai scroll.
di bawah ini contoh Gadget Arsip tanpa scroll:

Contoh gadget Arsip dengan scroll:

1. Login Blogger
2. Pilih Rancangan, Edit Html
3. Centang Expand Template Widget
4. Cari kode <div id='ArchiveList'> (Ctrl + F untuk lebih mudah mencarinya)
5. Cari kode seperti dibawah ini:

<h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <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:includable>

Tambahkan kode bercetak tebal seperti di bawah ini:

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

Alternatif lain kamu lihat kode diatas mempunyai Id dengan nama ArchiveList pada kode <div id='ArchiveList'>,

Kamu juga bisa membuat scroll cukup dengan CSS berikut simpan diatas kode ]]>:

#ArchiveList {
overflow:auto;
width:auto;
height:220px;
}

Untuk nama id tersebut bisa saja bukan ArchiveList bisa saja ArchiveList1, ArchiveList2, dst. sesuai nama Arsip gadget di template kamu jadi tinggal disesuaikan saja. ok