Tuesday, 22 May 2012

Cara Membuat Scroll Box pada Arsip Blog

Cara Membuat Scroll Box pada Arsip Blog.  teman teman bosan dan jenuh  dengan tampilan arsip blog yang terlalu panjang dan ingin menjadikannya lebih simpel dalam satu kotak, berikut akan saya jelaskan bagaimana cara membuat sroll box arsip pada blog. sebenarnya untuk tidak menampilakan bentuk arsib blog yang tidak  kepanjangan bisa dilakukan dengan pengaturan standar bawaan blogger sendiri, seperti membuat tampilan menu drop down atau tampilan flat bisa dilakukan secara gampang. tinggal masuk kepengaturan blog saja dan tinggal memilih tampilan mana yang anda suka.

Tapi bisakah kita tetap menggunakan pilihan menu Kali ini saya akan berbagi bagaimana trik membuat widget  arsib blog yang  mempunyai fungsi scrol .
berikut cara-caranya:
• 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>

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


• Simpan

Bijaklah dalam berkomentar
EmoticonEmoticon