Cara Membuat Scrol Box Pada Arsip Blog

Labels: Tips dan Trik, Tutorial Blog

Posted by noochii at 7:18 PM

 Kali ini saya akan berbagi bagaimana trik membuat widget  arsib blog yang  mempunyai fungsi scrol .

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki
• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti 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'>

Kemudian tambahkan code ini <div style='overflow:auto; width:ancho; height:100px;'> persis dibawah code <div class='widget-content'> jadi hasilnya akan berbentuk seperti 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;'>

Setelah itu cari code ini tidak jauh kog dari code diatas

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

Dan terakhir tinggal menutup code tersebut dengan perintah </div> jadi hasilnya akan seperti ini

<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Dan bentuk script keseluruhan akan seperti 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;'>
<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>

<div style='overflow:auto; width:ancho; height:100px;'>
100 px adalah tinggi dari bidang tersebut jadi tinggal rubah nilainya sampai anda sudah merasa cocok dengan template anda.