Membagi Kolom Widget Secara Horizontal

Membagi Kolom Widget Secara Horizontal

Jika beberapa waktu yang lalu telah terpostingkan tentang cara membagi kolom widget dalam arah vertical dan horizontal serta di posting sebelum ini juga telah terpostingkan "Membagi Kolom Widget Secara Vertical", maka agar lebih lengkap hingga bisa dipergunakan sebagai pembanding dalam menggunakan kode, maka kali ini coba kita bahas salah satu cara membagi kolom widget dalam arah horizontal. 

Karena telah terdukung oleh dua artikel yang telah terposting dan karena permainan kode yang digunakan sebenarnya juga tak jauh berbeda, maka untuk yang ini kita tidak akan bongkar secara detail. Satu prisip yang menjadi patokan saat kita berusaha membuat kolom berderet horizontal adalah penggunaan kode float-left, float-right, margin, height, width dan overflow yang dipergunakan untuk membentuk scroll box. Sampeyan dapat menggunakan semua xHTMl dengan bantuan kode float-left saja, float-right saja atau dengan memadukan float-left dan float-right. Jika ukuran tinggi kolom berbeda-beda dan ingin menampilkan setiap box (yang berisi widget atau yang lain) terlihat rapi, maka penggunaan width dan height serta scroller tak dapat dihindarkan. Kode lain yang dibutuhkan adalah margin-left atau margin-right yang bernilai negatif. Agar jarak antar box sama, gunakan margin-left atau margin-right dengan nilai tertentu sedang margin diposisi yang berlawanan bernilai 0 (nol). 

Sebagai contoh xHTML untuk membentuk penataan box atau pembagian widget secara horizontal, sampeyan bisa mengkopy XHTML yang disertakan di bawah. Kode tersebut hanyalah salah satu dari sekian banyak kode dan cara yang bisa digunakan untuk membuat pembagian kolom widget secara horizontal. Perhatikan juga bahwa box-box ini telah terwadahi dalam sebuah box besar (div class="box_utama") dengan lebar 800px. Kode width:800px; dapat dihilangkan saat pemasangan dilakukan di widget blog. Lebar 800px hanyalah sebagai percobaan hingga diperoleh susunan yang simetris. Jika sampeyan punya dreamweaver xHTML ini bisa langsung dicoba praktekan. Penggunaan class seperti box1 s/ box6 hanyalah sekedar untuk lebih mudah membedakan tiap boxnya. Sampeyan sebenarnya juga bisa memanfaatkan class ini ketika penataan menggunakan penggabungan antara xHTML dan kode CSS. Penambahan kode yang lain seperti background dan border serta border radius hanyalah untuk membuat setiap box terlihat lebih menarik.

xHTML Pembagian Kolom Widget Horizontal

<div class="box_utama" style="width:800px;height:400px;padding:5px;margin:15px auto;margin-left:5px;margin-right:5px;border:4px solid #666;background: #111 url(http://i907.photobucket.com/albums/ac274/bloggerstuars/templates/bgCoklatTuaV300H5.jpg) center repeat-x;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">

<div class="box1" style="float:left;margin-right:5px;padding:4px;border:2px solid red;background:#aaa;width:125px;height:385px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;">
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/CircleGRV66H66.jpg" height="30" width="30" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #222;background:#777;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;" />
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

<div class="box2" style="float:left;margin-right:10px;padding:4px;border:2px solid red;background:#aaa;width:125px;height:385px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;">
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

<div class="box3" style="float:left;margin-right:5px;padding:4px;border:2px solid red;background:#aaa;width:210px;height:185px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;">
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/GambarFloating_gubhugreyot.gif" height="90" width="185" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #222;background:#777;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;" />
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

<div class="box4"style="float:left;margin-right:5px;margin-left:-227px;padding:4px;border:2px solid red;background:#aaa;width:210px;height:180px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;margin-top:205px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZF1GAFt8dCAPMNIW1-C1DS2tbHX5PDnW8Z8AuxyUinSDZDL_8_H_8XJ94kB3-EZJW4lKP2JbhCfwxY7lqHGjg3tNlxuEybrv7SBTjCGj554qPWs_xi12msJezpOKzjIAh45lUwgyf0g/s320/MerahPutihSukarno.jpg" height="125" width="110" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #222;background:#777;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;" />
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

<div class="box5" style="float:right;margin-left:5px;padding:4px;border:2px solid red;background:#aaa;width:125px;height:385px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;">
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/CircleGRV66H66.jpg" height="70" width="70" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #222;background:#777;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;" />
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

<div class="box6" style="float:right;margin-left:5px;padding:4px;border:2px solid red;background:#aaa;width:125px;height:385px;overflow:auto;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;">
Mengapa Navigasi Halaman Blog kita sebuat paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang
</div>

</div>

Tweet