Membuat Label Dengan Fungsi Scroll

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat label dan arsip ( archive ) dengan fungsi scroll. Sebenarnya tutorial ini di request oleh sobat dari malaysia lewat chat box "How to make archives just like yours ?". Langkahnya cukup sederhana, sobat tinggal menambahkan sedikit kode pada arsip sobat. Sebelumnya buatlah widget arsip/archive dengan nama arsip blog atau apa saja, ini cuma untuk memudahkan sobat dalam penambahan kode nantinya. Pilih model yang Hirearchy

Kalau sudah membuat widget arsip, langkah selanjutnya sobat masuk ke edit HTML jangan lupa klik kotak Expand Template Widget. Carilah nama widget arsip blog yang sudah sobat buat tadi ( tekan Ctrl F untuk lebih mudah ).

Carilah 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:100px;'>
<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'/>

Kode yang berwarna hijau sebelumnya tidak ada, tambahkan kode itu untuk aktifkan fungsi scrollnya. Yang berwarna biru adalah tinggi arsipnya, sesuaikan dengan template sobat. Setelah itu simpan..

Untuk membuat label dengan fungsi scroll, langkah-langkahnya sama seperti yang di atas. Sobat cari kode seperti di bawah ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<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:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tambahkan kode berwarna hijau, dan simpan template. Sekarang lihat pekerjaan sobat.

Semoga bermanfaat.
Alhamdulillah...