Membuat daftar list link scroll down

Suka dengan tulisan ini?

Bagikan

Daftar list link yang terlalu panjang tentunya membuat penampilan blog anda menjadi kurang bersahabat bagi pengunjung anda. Apalagi jika list link tersebut mencapai 100 atau lebih. Blog anda tentunya akan kelihatan terlalu panjang dan tidak enak. Untuk mengatasi masalah tersebut, kita dapat mengakalinya dengan membuat list link tersebut menjadi scrol down. Contohnya bisa dilihat di blogroll blog ini. Lansung saja yah,


Pertama login ke blog anda terus menuju ke edit html template anda dan jangan lupa download template anda. Setelah itu centang expand widget templates.
Sekarang, cari judul list link anda yang akan dibuat scroll down. Seperti pada blog ini, saya akan menerapkan pada list link blogroll.

Ketemu seperti dibawah ini,

<b:widget id='LinkList2' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Jika sudah ketemu, silahkan copy paste code dibawah ini disamping widget content.

style='height:200px; overflow:scroll'

Sehingga menjadi seperti dibawah ini

<b:widget id='LinkList2' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content' style='height:200px; overflow:scroll'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Selesai. simpan template anda dan lihat hasilnya. Tulisan warna hijau dapat anda ganti sesuai dengan kemauan anda.
Selamat mencoba..

Suka dengan tulisan ini?