Cara membuat Label scroll blog

Sering saya menjumpai pada situs yang disitu terdapat suatu label yang ada scrollnya, Aku tertarik untuk mencobanya, dan ahirnya saya mempostingnya untuk sobat semuanya. Pertanyaan yang sering muncul dalam benatku adalah Bagaimana cara memberi scroll pada label? Akhirnya saya cari-cari dan menemukan cara itu. Label itu memang penting, usahakan setiap tulisan diberi label yang sesuai, fungsinya adalah untuk mempermudahkan penelusuran berdasarkan label dan mengetahui tulisan (postingan) yang terkait berdasarkan kesamaan label.

Memang sangat tidak enak dipandang dan bikin susah jika terdapat banyak label. Apa lagi jika jika dibuat tampilannya mendatar, satu-satu dari atas. Sidebar jadi terlihat memanjang ke bawah. Tidak seimbang dengan post area. Oleh sebab itu untuk mengakalinya bisa memberi scoll pada label. Sehingga fungsi scroll akan membuat lebih rapi.

Screenshot :

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 300px 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.