Cara Membuat Widget Blog Archive Dengan Fungsi Scroll

Rasanya udah lama saya ga posting di blog ini karna ngurusin blog yang 1 lagi. Pasti udah pada kangen nunggu artikel baru dari  R-C Blog'S ya hehehehe, tapi tenang aja yang kangen sama artikel dari R-C Blog'S. Nih saya kasih artikel baru, pada artikel ini saya akan berbagi cara membuat widget blog archive dengan fungsi scroll. Saya rasa dengan fungsi scroll ini widget blog archive jadi lebih menghemat tempat alias tidak memakan tempat, ok buat yang pengen langsung aja ikuti langkah-langkahnya di bawah ini.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

1.  Login ke Blogger.

2.  Di halaman Dasbor, kita pilih Template.

3.  Kemudian pilih Edit HTML

6.  Klik Lompat ke widget  > Lalu pilih Blog Archive

7.  Kode lengkapnya kurang lebih seperti di bawah ini, karna setiap blog berbeda-beda kodenya. Tapi tenang aja pasti sama koq cuma beda di kode BlogArchive-nya aja biasanya di belakangnya ada 1,2, atau 3.

<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>

8.  Kode warna merah dan biru adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera. 
9.  Terakhir, Klik Simpan dan selesai..