Beranda » Tips and Trick » Trick Blog » Cara Membuat Posisi Widget Rata Tengah di Scroll Box

Cara Membuat Posisi Widget Rata Tengah di 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.

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

<a href="http://www2.clustrmaps.com/counter/maps.php?url=http://klikmunadi.blogspot.com" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=http://klikmunadi.blogspot.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a>
<a href="http://s06.flagcounter.com/more/1xTU"><img src="http://s06.flagcounter.com/count/1xTU/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=248/viewers=0/labels=1/" alt="free counters" border="0"></a>

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

</center>

</div>

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