Widget Scroll Bar Untuk Blogger

Widget scroll bar ini sangat membantu sekali menurut ku, bisa dilihat sendiri sidebar blog ini bisa lebih diminimalkan dari sebelumnya. Dari yang sebelumnya sidebar blog ini memanjang kebawah, dengan adanya widget scroll bar ini, maka sidebar blog ini gak memanjang kebawah lagi. Perhatikan elemen label/kategori dan elemen link blogroll yang menggunakan scroll pada sidebar kiri blog ini, itu salah satu contoh penggunaannya. Buat kamu yang mau silahkan copy kodenya dibawah ini:

Tambahkan kode dibawah ini pada elemen halaman blog kamu dan lihat hasilnya. Ganti kode warna merah dan biru sesuai kebutuhan kamu, jangan lupa mengubah height(tinggi) dan widht (lebar) sesuai kebutuhan sidebar blog kamu pada kode yang berwarna hijau.

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">
<li><a href="http://www.blogmu.blogspot.com">Your Text1</a></li>
<li><a href="http://www.blogmu.blogspot.com">Your Text2</a></li>
<li><a href="http://www.blogmu.blogspot.com">Your Text3</a></li>
<li><a href="http://www.blogmu.blogspot.com">Your Text4</a></li>
<li><a href="http://www.blogmu.blogspot.com">Your Text5</a></li>
<span style="font-weight:bold;"></span>
</ul></div>

Nah... kalo kamu mau link blogroll atau label disidebar blog kamu menggunakan scroll, ikuti langkahnya dibawah ini. Tinggal sedikit di otak-atik dengan menggunakan kode diatas.

Ku ambil contoh, untuk membuat link blogroll kedalam scroll bar. Karena biasanya link blogroll paling panjang kebawah, apalagi kalo blognya rajin link exchange dengan blog2 lain atau hobi ngoleksi link, kan gak lucu kalo satu sidebar hanya dihabiskan untuk link blogroll karena terlalu memanjang kebawah. Untuk membuatnya lebih pendek, salah satu solusinya adalah dengan cara ini :)

Cari kode berikut:

<b:widget id='LinkList1' locked='false' title='Links' 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>

Ganti dengan kode dibawah ini:

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul style='height:270px;width:220px; overflow:auto; '>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
<span style='font-weight:bold;'/>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kode warna merah adalah kode tambahan yang diambil dari kode widget scroll bar diatas, agar link blogrollnya bisa masuk kedalam scroll bar. Untuk elemen lainnya otak-atik sendiri ya hehehe.

Ok dech... silahkan dicoba dulu sebelum protes :)

Related Post