Saturday, January 21, 2012

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.


My Ping in TotalPing.com
Ping your blog, website, or RSS feed for Free
Feedage Grade C rated
Preview on Feedage: general Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki