Membuat Scroll Bar pada Blog Archive di Blogspot

Untuk membuat scroll bar pada blog archive di Blogspot caranya adalah sebagai berikut:

1. Login ke Blogspot –> Rancangan –> Edit HTML, lalu beri centang atau tanda ceklis pada kolom Expand Template Widget.

2. Cari baris kode <div id='ArchiveList'> seperti berikut:

<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>
  <b:include name='quickedit'/>
  </div>

3. Tambahkan baris kode HTML untuk membuat scroll bar diatas baris kode <div class='widget-content'> sehingga baris kodenya menjadi seperti berikut:

<div style="overflow: auto; width: 329px; height: 415px">
  <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>
  <b:include name='quickedit'/>
  </div>
</div>

Dimana:

width merupakan lebar dari kolom scroll bar yang dibuat, sesuaikan nilainya dengan lebar sidebar. Untuk blog ini, lebar kolom scroll bar-nya lebih kecil 7px dari lebar sidebar.

height adalah tinggi kolom scroll bar yang dibuat, rubah nilainya sesuai keinginan.

Untuk keterangan lebih lanjut tentang scroll bar bisa lihat disini.

4. Simpan template dan lihat hasilnya.

Selamat mencoba :-)

Recent Posts :