Mengenal dan Membuat Arsip Blog

Arsip Blog adalah salah satu widget yang telah lama dibuat oleh Blogger.com,berfungsi untuk melihat artikel-artikel lama yang telah kita buat dengan jerih payah.Baiklah saya akan menjelaskan tentang ini.



Ini request dari sahabat saya,Mas Erik :

Wan, kalau scroll untuk blog archive gimana caranya. Diposting ya

Bagaimana Cara Membuatnya?

ikuti langkah-langkah berikut :

• Login ke Blogger.com

• Klik Tata Letak/Layout

• Klik Elemen Halaman/Page Elements

• Klik Tambah Gadget/Add Gadget

• Klik Widget"Arsip Blog"
• Lihat gambar ini,Isi sesuai dengan yang digambar :

• Judulnya harus : Arsip Blog

• Lihat ada 3 Fungsi yaitu Hierarki,Daftar Flat dan Menu Dropdown,Pilih Hierarki.

• Klik Simpan.

• Hasilnya begini :

Bagaimana cara membuat widget Arsip Blog menggunakan scroll?

• Klik Layout/Tata Letak

• Klik Menu Edit HTML

• Klik Edit HTML → Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Klik Expand Widget Template

• Teman cari kode ini :
  <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

• Atau cari judulnya yaitu : Arsip Blog

• Ketika teman menemukan scriptnya secara lengkapnya begini :

  <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div style='overflow:auto; width:ancho; height:100px;'>
  <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:includable id='flat' var='data'>
  <ul>
  <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='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='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
  <ul>
  <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='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
  <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
  <span class='zippy toggle-open'>&#9660; </span>
  </a>
  <b:else/>
  <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
  <span class='zippy'>
  <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
  &#9668;
  <b:else/>
  &#9658;
  </b:if>
  </span>
  </a>
  </b:if>
  </b:if>
  </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:widget>

  
  

• Yang berwarna merah adalah kode yang harus ditambahkan di script itu.

• Teman bisa merubah height: 100px dengan tinggi yang diinginkan.

• Hasilnya begini :

Meskipun panjang dan agak rumit semoga teman semuanya berhasil.