Membuat Scroll pada Blog Archive (Arsip Blog)

Posted by Muhammad Fiqih on 0

Kang Fiqih | Assalamu'alaikum wr.wb, pada mulanya saya memasang template blog ini dengan pengaturan tata letak yang sangat berantakan. Di situ juga ada sebuah Blog Archive (Arsip Blog) yang menjadi salah satunya. 

Saya atur satu demi satu widget-widget yang tidak diperlukan untuk blog saya ini. Saya berfikir sudah selesai untuk mengatur tata letak di blog saya. Namun setelah saya memposting beberapa artikel, terlihat blog archive ini makin lama makin panjang, dan itu menurut saya sangatlah menggangu tampilan di blog ini.

Setelah itu, terpikirlah saya untuk bagaimana caranya agar blog archive ini bisa di perpendek. Dan mungkin cara satu-satunya adalah memakai scroll disini. Memang fingsi scroll di blog adalah jika terdapat banyak postingan di blog tidak akan memakan tempat yang banyak.

Dan saya telah menemukan cara untuk Membuat Scroll pada Blog Archive (Arsip Blog). Berikut adalah langkah-langkahnya :

1. Login ke Akun Blog Anda.

2. Klik menu Template --> Edit HTML.

3. Cari kode di bawah ini dengan menggunakan Ctrl+F

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>..................... </b:widget>

keterangan : 

• jika Anda tidak menemukan kode di atas maka Anda cari dengan kata kunci "BlogArchive". (carilah kode yang serupa dengan kode di atas)

4. Ganti kode tersebut dengan kode di bawah 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>

keterangan :

• kode yang berwarna merah adalah tinggi yang diinginkan untuk widget blog archive ini.
• ganti kode yang berwarna merah sesuai dengan yang Anda kehendaki.

Selamat beraktivitas dan sampai jumpa ...