Cara Membuat Widget Rata Tengah Scroll Box

Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.

Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

</div>

Ganti script widget dengan script widget yang akan dipasang.
width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.

Sebagai contoh:
Misalnya, saya mempunyai beberapa script widget yang akan dipasang di scroll box, yaitu:

<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a>

<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a>

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a>

<noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a>

<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<center>

<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a><br/>

<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a><br/>

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><br/>

<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><br/>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a><br/>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a><br/>

<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a><br/>

<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a><br/>

</center>

</div>

Bila diletakkan di sidebar, maka hasilnya akan tampak seperti di bawah ini.