Membuat Arsip dan Label Blog menjadi hemat tempat dengan model Scroll

Postingan kali ini, saya akan membahas tentang cara membuat arsip dan label blog yang model scroll, seperti yang sedang saya gunakan diblog ini. Btw, tau scroll kan? Coba tarik halaman blog ini keatas dan kebawah, nah naek turun kan? Itulah yang dinamakan model scroll. Fungsi Arsip dan Label dibuat scroll tentu adalah menghemat tempat Blog Anda seperti blog ini. Jika tidak diakali dengan menggunakan scroll tentu akan membuat label atau arsip akan memanjang terus menerus sehingga membuat halaman blog menjadi tidak karuan. Contoh model archive dan label yang memakai scroll adalah sebagi berikut :

Untuk  membuatnya kita hanya menambahkan script berikut : <div style='overflow:auto; width:ancho; height:100px;'>

Dan, untuk letaknya akan saya beberkan satu persatu :

Arsip Model Scroll :

1. Login > Layout > Elemen Halaman

2. Buat widget Arsip dengan nama Arsip Blog

3. Pilih model yang Hirearchy 

4. Masuk ke Edit HTML > centang kotak Expand Template Widget

5. Carilah 'Arsip Blog'. Selengkapnya begini: 

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

6. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya

7. Dan untuk warna hijau, itu adalah tinggi arsip scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.

8. Langkah terakhir, tentu adalah Simpan Template   

Label Model Scroll :

1. Saya anggap anda telah memakai widget ini, dan langsung aja menuju Edit HTML

2. Klik Expand Widget Template

3. Carilah dengan kata kunci Label. Selengkapnya begini :

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

4. Kode warna merah, tentu belum ada ditemplate Anda. Tambahkan kode tersebut dan label model scroll akan aktif.

5. Dan untuk warna biru, itu adalah tinggi label scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.

6. SImpan Template.

Oke selesai, moga bermanfaat buat sobat-sobat semua. 

Sumber:http://vanmovic.co.cc

Welcome to my blog, Thanks for visiting and reading.