Cara memasang scoll pada Labels di blog

Labels/Kategori mempunyai peranan yang sangat penting dalam sebuah Blog karena akan memudahkan pengunjung Blog sobat dalam mencari sesuatu yang mereka inginkan dan sebuah Blog semakin lama akan mempunyai Labels/Kategori yang banyak dan panjang sehingga akan memakan tempat yang banyak pula.

Untuk mengatasi hal tersebut sobat bisa menggunakan Fungsi Scroll atau menggulung sehingga bisa menghemat tempat.

Buat sobat Blogger yang ingin memasang Scroll pada Labels

Caranya sebagai berikut :

Seperti biasa sobat harus Login ke Blogger
Klik Rancangan (yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget ,

lihat gambar di bawah :



Tunggu beberapa saat ketika proses sedang berlangsung
Kemudian cari kode seperti dibawah ini
untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keboard sobat


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

Untuk membuat scroll Copy kode berikut :

<div style='overflow: auto; width: 175px; height: 200px; text-align: left;'>

</div>

Letakkan dibawah kode berikut :

<div class='widget-content'>

dan diatas kode ini:

<ul>

Maka hasil akan menjadi seperti di bawah ini :

<b:widget id='Label1' locked='false' title='Labels' 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: 100%px; height: 300px; text-align: left;'>
<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>

Lihat kode yang di cetak tebal, itu adalah kode tambahannya dan sedikit catatan nilai dari Width: 160px; dan Height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.

kemudian Simpan selesai dan lihat hasilnya.