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'>
<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;'><b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
Setelah itu cari code ini tidak jauh kog dari code diatas
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<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 == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<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