tampilan arsip blog dengan Scroll

Selamat siang kawan, sempat tadi saya mengalami kecelakaan yang lumayan drastis. Tapi alhamdulilahmasih di selamatkan jatuhnya dari sepeda motor, lupakan peristiwa tadi. yukk langsung saja kembali ke layar kaca pembahasan. hehe dalampostingan fathan kali ini fathan akan share sedikit tutorial tips trikmempercantik blog

dengan membuat scroll pada widget arsip biar lebih hematdalam penempatannya disamping itu tampilan pun akan terlihat rapih. Disamping itujuga kawan fathan yaitu agan Romadho Agung meng-request , gimna supaya tampilanarsip di bikin scroll. Baik gan, mungkin ini bisa menjawab pertanyaannya. Hehe ^_^langsung aja yuuu ke pembahasan langkah-langkahnya :

• Masuk ke akun blogger kawan-kawan :

• Klik Tata Letak

• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog Tapi kawan-kawan harus pilih yang gaya Hierarki

• Setelah itu masuk ke settingan template, klik Edit Html
• sebelumnya download dulu template kawan-kawan takutnya terjadi kacau nantinya, buat jaga-jaga bila nanti eror

• Beri tanda centang dulu pada tulisan “Expand Widget Template”

• Lalu kawan-kawan cari kode seperti yang dibawah ini :

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

laluoleh kawan-kawan tambahkan dengan coding seperti ini <divstyle='overflow:auto; width:ancho; height:100px;'> tepat dibawah code <div class='widget-content'>sehingga hasilnya

akanseperti ini

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

setelahcara yang kesatu selesai , kawan-kawancari lagi coding dengan bentuk seperti di bawah ini lalu tambahkan code"</div>" (tanpa tanda kutip ya kawan buat example saja) :

<b:if cond='data:style == &quot;MENU&quot;'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

sehinggabentuk hasil jadinya akan terlihat seperti yang dibawah ini, kawan-kawan :

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

keterangan : code yang bertuliskan <div style='overflow:auto;width:ancho; height:200px;'> didalamnya terdapat angka 200px yang menunjukan tinggi suatu kotakscroll tersebut, dan kawan-kawan bisa edit dengan sendirinya sesuai selerakawan-kawan, fathan yakin kawan-kawan lebih kreatif dari saya. :D

setelahsemuanya selesai, save template kawan-kawan. Dan lihat hasil yemplate yangsudah kawan-kawan edit barusan. Good luck selamat berpraktik ria kawan :D cukup sekian dulu dari fathan nantikan kembali pada postingan yang selanjutnya .. salam semangat kawan