Membuat Arsip Blog Model Scroll

Posted by





Mengunakan Arsip Blog Model Hirarki akan memakan banyak tempat dalam blog kita terutama tinggi blog, seiring bertambahnya jumlah postingan dan pertambahan usia blog kita, maka bertambah pula tinggi Blog Arsip Kita, kalau hal ini dibiarkan begitu saja, bukan tidak mungkin orang yang tadinya menyukai blog kita akan berhamburan pergi setelah melihat tampilan blog kita yang makin kurang menyenangkan karena arsip blog kita menjadi semakin panjang nah untuk mengatasinya, sobat tidak perlu mengubah arsip blog sobat menjadi dropdown menu atau malah menghapusnya, tapi biarkan tetap begitu, yang perlu kita atur adalah tinggi dari Arsip Blog kita menjadi sebuah kotak scroll yang bisa ditarik ke atas dan kebawah seperti gambar dibawah ini:












Tapi ini hanya contoh gambar saja jadi ngga bisa ditarik keatas dan kebawah
Nah untuk membuat yang seperti itu gimana caranya??
Ok.. Begini caranya:

Pertama setting arsip menjadi model Hirarki
(Login Blogger - Layout / Tata letak - add widget)
Simpan dengan nama (Arsip Blog)

Langkah berikutnya, buka Edit HTML jangan lupa centang Expand Template Widget ya
Cari Arsip Blog dalam HTML anda. (untuk mempermudah tekan tombol Ctrl + F, paste kata yang ingin dicari)
untuk selengkapnya yang harus amati adalah kode berikut:

<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:150px;'>
<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'/>

Nah tambahkan kode warna merah, yang tadinya belum ada ke posisi itu, preview dulu hasilnya, setelah sudah terlihat perubahan sesuai dengan keinginan, simpan tempelatenya,

Catatan: untuk mengatur tingginya, ubah saja angka pada height:150px pada kode  yang tadi telah kita tambahkan menjadi ukuran yang sobat mau.

Ok sekian Tips kali ini.. semoga membantu


---


Demo Blog NJW V2 Updated at: 5:59 PM

0 comments:

Post a Comment

Random post

Powered by Blogger.