Scroll Bar Untuk Label Yang Memanjang

Selama ini saya kurang sreg (nyaman) dengan label/kategori (default blogger) yang memanjang dan hal ini akan bertambah panjang lagi seiring dengan bertambahnya label/kategori postingan kita. Setelah sekian lama saya mencari dan bertanya kepada Mbah Google, akhirnya saya menemukan juga tips Scroll Bar Untuk Label Yang Memanjang tersebut pada blog Anak Nias in Blogging. Dengan tips tersebut, label/kategori yang memanjang ke bawah dapat diperpendek dengan scroll bar sesuai kebutuhan dan keinginan kita sehingga dapat menghemat space side bar blog. Jika tertarik silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

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!!

(sumber inspirasi : anak-nias.blogspot.com)

Baca juga yang ini.

1. Kustomasi Membuat Bullet Pada Blog
2. Kustomasi Penomoran Pada Blog
3. Membuat Chicklet Secara Online
4. Tips Melindungi Blog dari Copy Paste
5. Tips Membuat Favicon dgn Favicon Generator
6. Tips Memasang Favicon Pada Blog
7. Tips Mendulang Dollar dari Blogsvertise
8. Tips Menyembunyikan Tab Screen Saver

Artikel Yang Berhubungan