Cara Memasang Scroll pada Label Blog

Label/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 Label/Kategori yang banyak dan panjang sehingga akan memakan tempat yang banyak pula.
Untuk mengatasi hal tersebut sobat bisa menggunakan Fungsi Scroll sehingga bisa menghemat tempat.
Buat sobat Blogger yang ingin memasang Scroll pada Label
Caranya sebagai berikut :

Login ke Blogger
Klik Rancangan → 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

Kemudian cari kode seperti dibawah :

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

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

dan

</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 berwarna biru, itu adalah kode tambahannya dan sedikit Catatan nilai dari width: 100%px; dan height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba