Jumat, 11 Mei 2012

Cara Membuat Scroll pada Label di Blog

Label itu memang penting, usahakan setiap tulisan diberi label yang saling terkait. Fungsinya adalah untuk mempermudahkan penelusuran berdasarkan label dan mengetahui tulisan (postingan) yang terkait berdasarkan kesamaan label.

Memang sangat tidak efektif dan efisien area yang terpakai banyak label. Apalagi jika tampilannya dibuat mendatar, satu-satu dari atas. Sidebar jadi terlihat memanjang ke bawah dan tidak seimbang dengan post area. Oleh sebab itu untuk mengakalinya bisa membuat scoll pada label. Sehingga fungsi scroll akan membuat lebih rapi.

Berikut Cara Memberi Scroll pada Label di 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='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:300px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

6. Kode yang berwarna merah adalah kode yang harus kita sisipkan, dan 300 adalah tingginya.
7. Simpan Template jika sudah selesai.

Jika di template kamu tidak menemukan kode  :
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

berarti cari kode  
<div class='widget-content'>

dan sisipkan kode yang berwarna merah setelah itu. 

Selamat Mencoba

Tidak ada komentar:

Poskan Komentar