Cara untuk membuat Scroll pada Arsip Blog Sobat

Cara untuk membuat Scroll pada Arsip Blog Sobat

           

           Hari ini saya akan berbagi tips,, bagaimana membuat scroll pada arsip blog,, gunanya apa sih?  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:200px;>

<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>
<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 + &quot;_ArchiveMenu&quot;>
<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=&quot;archivedate &quot; + 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 == &quot;expanded&quot;>
<a class=toggle expr_href=data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen>
<span class=zippy toggle-open>&#9660; </span>
</a>
<b:else/>
<a class=toggle expr_href=data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen>
<span class=zippy>
<b:if cond=data:blog.languageDirection == &quot;rtl&quot;>
&#9668;
<b:else/>
&#9658;
</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 Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut,
      200 adalah tingginya, dan kita bisa ubah seseuai selera. 

8.  Simpan jika sudah selesai.

Cr : Ino-Yasha.blogspot.com

go to link download