Hallooo sobat Teknologi Informasi, kali ini kami akan menshare tutorial tips dan trik pada blog dengan membuat scroll pada widget arsip blog agar lebih hemat dalam penempatannya dan tampilan pun akan terlihat rapih.
Menggunakan tampilan herarki pada arsip blog yang mempunyai kelebihan
bisa menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat
blog terlihat kurang rapi. Oleh karena itu disini kita akan membuatnya menjadi bentuk scroll. Jika sobat sudah menambahkan widget arsip blog dengan model herarki ini, langsung saja lakukan langkah selanjutnya.
Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
- Login ke Blogger.
- Di halaman Dasbor, kita pilih Rancangan.
- Kemudian pilih Edit HTML
- Beri tanda centang pada Expand Template Widget
-download dulu template sobat untuk mengantisipasi bila terjadi eror dan kacau nantinya
-Kemudian cari kode berikut ini :
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
-Setelah ketemu sobat letakkan kode <div style='overflow:auto; width:ancho; height:200px;'> tepat dibawah <div class='widget-content'>
-Setelah selesai sobat letakkan kembali kode </div>
-Kode lengkapnya adalah seperti ini
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<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 + "_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:include name='quickedit'/>
</div>
</b:includable>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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:include name='quickedit'/>
</div>
</b:includable>
- Kode warna biru dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera sobat.
-Simpan jika sudah selesai.
Sekian
dari kami semoga bermanfaat bagi sobat sekalian, jangan pernah lelah
untuk terus berkarya dan berkreatifitas. Sampai jumpa... hehehee ^ - ^