MEMPERCANTIK TAMPILAN ARSIP BLOG

                                 MEMBUAT ARSIP BLOG BERGULIR

Pada postingan kali ini saya menguraikan cara membuat Arsip blog / Daftar isi dengan fungsi scroll.

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan Tutorial petunjuk cara pembuatanya di bawah ini :


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

Utuk menambahkan fungsi scroll pada Arsip
1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit  HTML
4. Beri tanda centang (V) pada expand widget template
5. Cari Arsip yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Arsip”, ( biasanya di
    pojok kanan bawah ). akan muncul kode html seperti di bawah ini:

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> 


Atau anda dapat menemukan kode lengkapnya seperti ini


<b:widget id='BlogArchive2' locked='false' title='Arsip' 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: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>
<b:include name='quickedit'/>
</div>
</b:includable>





6. Perhatikan tulisan yang berkedip dan berwarna biru di atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna hitam tebal  pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )

7/ Simpan template dan lihatlah hasilnya