Scroll Bar Untuk Label Yang Memanjang

Memang tips ini tidak diperlukan lagi jika kita sudah mempunyai label cloud atau label flash yang juga mempunyai tampilan lebih hemat ruang/tempat. Namun bagi kita yang belum mempunyainya, kita dapat mencoba membuat label default blogger Anda menjadi lebih pendek dengan memanfaatkan scroll bar.

Langkah-langkah membuat scroll bar untuk label default blogger adalah sebagai berikut.

1. Login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> tab Edit HTML.

2. Centangi Expand Template Widget.

3. Kemudian cari dan temukan kode widget label/kategori, kurang lebih seperti di bawah ini.

<b:widget id='Label1' locked='true' title='Kategori' 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keterangan :

Kode yang berwarna merah berfungsi membuat daftar (bullet). Lebih lengkap tentang bullet dapat dilihat di sini.

Kode title='Kategori' banyak ditemui dengan title='Label', tergantung masing blogger dalam menamainya.

4. Ganti kode <ul> menjadi <ul style="height:200px;width:210px; overflow:auto;"> sehingga selengkapnya menjadi seperti di bawah ini.

<b:widget id='Label1' locked='true' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul style='height:200px;width:210px; overflow:auto;'>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keterangan :
Anda dapat mengganti ukuran tinggi dan lebar sesuai kebutuhan & keinginan masing-masing dengan merubah angka pada height dan width dalam ukuran pixel.

Jika Anda ingin mengganti dengan penomoran angka, Anda dapat mengganti <ul style="height:200px;width:210px; overflow:auto;"> menjadi <ol style="height:200px;width:210px; overflow:auto;">.

5. Kemudian Simpan Template

6. Selesai

Sekarang, pastikan Anda telah mendapati perubahan pada label/kategori yang ada pada side bar blog Anda, yaitu simple atau lebih pendek dengan scroll bar yang berada di samping dan hal ini tentunya membuat lebih hemat space, kan! Hasilnya, dapat dilihat pada blog ini.

Jika tertarik, selamat mencoba, ya!!