Membuat Arsip Blog Dengan Fungsi Geser

Assalamualaikum,


Nah para blogger yang pengen tampilan arsipnya seperti gambar punya saya disebelah kiri ini,maksudnya membuat widget arsip blog dengan fungsi scroll/geser sehingga terlihat rapi dan isi postingan tidak terlihat panjang melorot kebawah.Pastinya lebih mantap dan keren dong.


Langsung aja ke TKP

Mau Browse dapat dollar Mudah Daftar Mybrowsecash Gratis




Namun Bagi yang belum ada arsip pada sidebar di blog anda buat dulu widget arsipnya ya...


Pertama-tama loggin ke akun blogger sobat Buka Dasbor-->Template(untuk menghindari kegagalan lebih aman dibackup template dulu)-->edit HTML-->Pilih lanjutkan-->Centang pada expand template widget.

• Cari kode  (untuk mempercepat pencarian tekan f3) <div class='widget-content'>  biasanya ada lebih dari 3 dengan kode yang sama namun cari dengan yang sesuai seperti kode dibawah
• </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>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
  
  
  Nah kalau sudah ketemu tambahkan kode(copas saja ya) dibawah ini 

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

  tepat dibawah  kode  <div class='widget-content'>

  dan kode </div> disamping kode </div> yang berada di atas  <b:include name='quickedit'/>
  
  
  Sehingga Hasilnya seperti dibawah ini
  
  
  
  

  <div class='widget-content'>
  <div style='overflow:auto; width:ancho;height:400px;'>
  <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>

  
  

  
  

  Keterangan text merah  adalah kode yang ditambahkan

  sedangkan text kuning height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 400 sesuai dengan keinginan )
  

  
  

  Nah Simpan dan lihat hasilnya dech 

  
  

  Selamat Mencoba.