Cara Membuat Arsip Blog dengan Spoiler

Jika pada posting yang lalu telah saya posting Cara Membuat Arsip blog / Daftar isi dengan Fungsi scroll. Pada postingan kali ini saya akan menguraikan Cara Membuat Arsip blog dengan Spoiler.

Dibawah ini adalah screenshot hasilnya yang saya ambil dari blog saya yang lain ( 1000-kisah):

Screenshot Sebelum dibuka

Screenshot Setelah dibuka

 Langsung aja deh.. simak ne cara membuatnya.

1. Login terlebih dahulu mengunakan akun bloger
2. Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip"  ( bisa diganti sesuai keingian )  pilih gaya hierarki
   
3. Simpan/save. sampai disini anda telah membuat Arsip ( tanpa fungsi scroll ).
4. Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
5. Beri tanda centang pada Expand Template Widgets.
6. Cari kode <div id='ArchiveList'> kemudian letakkan kode berikut tepat di atasnya :

<!--kode spoiler Arsip GaleryZone.blogspot.com-->
<div>
<div style='margin-bottom: 2px;'>
<b><small>Klik show untuk membuka arsip</small></b><br/>
<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show&apos;; }' style='font-size: 10px; margin: 0px; padding: 0px; width: 60px;' type='button' value='Show'/></div>
<div style='border: 1px inset; margin: 0px; padding: 6px;'>
<div style='display: none;'>
<div style='overflow:auto; width:ancho;height:200px;'>

    7. kemudian tambahkan kode di bawah ini tepat di atas kode <b:include name='quickedit'/> kode ini letaknya dekat di kode <div id='ArchiveList'>

<ol style='text-align: justify;'/>
</div>
</div>
</div>

Jika benar, kodenya akan menjadi seperti di bawah ini :

<div class='widget-content'>

<!--kode spoiler Arsip GaleryZone.blogspot.com-->

<div>

<div style='margin-bottom: 2px;'>

<b><small>Klik show untuk membuka arsip</small></b><br/>

<input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Show&apos;; }' style='font-size: 10px; margin: 0px; padding: 0px; width: 60px;' type='button' value='Show'/></div>

<div style='border: 1px inset; margin: 0px; padding: 6px;'>

<div style='display: none;'>

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

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

<ol style='text-align: justify;'/>

</div>

</div>

</div>

  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
</div>

   8. Terakhir, Simpan Template anda dan lihat hasilnya.

Catatan :

• Kode yang berwarna Ungu adalah kode yang harus diletakkan sesuai petunjuk di atas.
• Kode yang berwarna Biru adalah tingginya Arsip, bisa anda sesuaikan.

Demikian tips sederhana  Cara Membuat Arsip blog dengan Spoiler,
Semoga bermanfaat.