Bulan lalu berapa tulisan yang sudah kamu posting?
Coba deh, yang pasang widget Arsip Blog dilihat! Bulan lalu saya
berhasil memposting 8 tulisan di blog ini. Dan kali ini kita akan
belajar ngeblog lagi, yaitu membuat scroll
untuk arsip blog. Jika tampilan drop down sih tidak terlalu bermasalah.
Tapi jika memilih tampilan herarki yang mempunyai kelebihan bisa
menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat blog
terlihat kurang rapi. Iya kalau kita rutin mengupdate blog, kan sebagian
blogger dan saya tidak pasti rajinnya mengurus blog.
Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke
bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit
arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.
Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1.
Login ke Blogger.
2. Di halaman Dasbor, kita pilih
Rancangan.
3. Kemudian pilih
Edit HTML
4. Beri tanda centang pada
Expand Template Widget
5. Cari kode berikut
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
6. 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'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:250px;'>
<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:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl +
"&action=toggle" +
"&dir=close&toggle=" +
data:interval.toggleId + "&toggleopen=" +
data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl +
"&action=toggle" +
"&dir=open&toggle=" +
data:interval.toggleId + "&toggleopen=" +
data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 250 adalah tingginya, dan kita bisa ubah seseuai selera.
8. Simpan jika sudah selesai.