Membagi Kolom Widget Secara Vertical

Membagi Kolom Widget Secara Vertical

Sebuah widget tak harus hanya diisi dengan sebuah widget saja. Hanya dengan menggunakan xHTML maka kolom tersebut bisa dimanfaatkan untuk menempatkan beberapa buah widget, gambar dan/atau teks sekaligus. Bahkan, jika scroll box digunakan, maka setiap box dapat dibuat dengan ketinggian yang kecil sehingga kolom mampu memuat lebih banyak lagi scroll box yang didalamnya berisi widget serta teks dan/atau gambar. Sebagai contoh sampeyan bisa melihat gambar di bawah ini yang memperlihatkan cara pembagian kolom menjadi beberapa box/scroll box dengan ukuran yang bisa di atur.

Dalam gambar disebelah terlihat bahwa box pertama mempunyai ketinggian terendah dan dilengkapi scroller (scroll box-1). Box yang di tengah merupakan box yang tertinggi dan dilengkapi scroller juga (scroll box-2). Box yang terabawah sedikit berbeda dengan box pertama dan ke-2 karena box ini dibuat tanpa sebuah scroller. Jika kita ingin menggunakan box seperti ini kita hanya perlu membuang kode height: ..px; dan overflow:auto;. Untuk membuat bentuk scroll box ke-2 kode di atas harus digunakan karena 2 kode itulah yang menjadi kunci terbentuknya sebuah scroll box.

xHTML Box Tanpa Scroller

<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;text-transform:uppercase;font-size:14px;">Tuliskan Title Disini!</h3>
Letakkan Widget, teks dan/atau image di sini!
</div>

xHTML Scoll Box (Box dengan scroller)

<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;height:150px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:auto;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;text-transform:uppercase;font-size:14px;">Tuliskan Title Disini!</h3>
Letakkan Widget, teks dan/atau image di sini!
</div>

Jika sebuah gambar ingin ditampilkan di dalam box atau scroll box, tambahkan kode di bawah ini dan letakkan di bawah title (di bawah tag h3).

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZF1GAFt8dCAPMNIW1-C1DS2tbHX5PDnW8Z8AuxyUinSDZDL_8_H_8XJ94kB3-EZJW4lKP2JbhCfwxY7lqHGjg3tNlxuEybrv7SBTjCGj554qPWs_xi12msJezpOKzjIAh45lUwgyf0g/s320/MerahPutihSukarno.jpg" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #444;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;width:110px;height:124px;" />

Contoh xHTML penggabungan scroll box dan gambar

<div style="width:260px;margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;height:200px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:auto;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;">Bung Karno: Sang Proklamator</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZF1GAFt8dCAPMNIW1-C1DS2tbHX5PDnW8Z8AuxyUinSDZDL_8_H_8XJ94kB3-EZJW4lKP2JbhCfwxY7lqHGjg3tNlxuEybrv7SBTjCGj554qPWs_xi12msJezpOKzjIAh45lUwgyf0g/s320/MerahPutihSukarno.jpg" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #444;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;width:110px;height:124px;" />
Tak seorangpun meragukan kehebatan sang Proklamator. Kepiawainya dalam berorasi membuat namanya tak hanya dikenal di seantero negeri. Afrika hingga ujung Amerika Selatan mengenalnya dengan baik sebagai seorang tokoh besar yang mempunyai peran kuat di Asia, Afrika bahkan hingga dunia. Dialah tokoh besar dari sebuah negeri baru merdeka tetapi dengan gagah berani mengatakan "Go to Hell with your aids!", terhadap si negeri adidaya, Amerika Serikat. Sayang ..., hingga detik ini tak seorangpun tokoh negeri ini mampu meniru atau mewarisi kehebatan dan keberanian Sang Pahlawan Besar tersebut. Mental kerdil penakut sudah menjadi penyakit kronis yang menggerogoti jiwa anak negeri. Buh ..... sungguh memalukan sebenarnya. Ternyata tak satupun punggawa negeri super kaya dan super besar ini seberani Sukarno untuk barang sekedar mempertahankan harga diri dan martabatnya ... memalukan ... sungguh .... !!!
</div>

Keterangan/catatan:

• Kode-kode di atas dapat ditambah atau dikurangi termasuk nilainya.
• Jika menginginkan background seperti yang digunakan di blog, silahkan kode untuk background dihapus.
• untuk membuat tampilan semakin menarik, bisa digunakan background berupa image.
• Jika ingin merubah ketinggian scroll box, lakukan perubahan pada height:..px; Semakin besar maka akan semakin tinggi.
• Kolom widget dapat diisi dengan gabungan box tanpa scroller dan scroll box. Untuk penyusunannya langsung gunakan secara berurutan dari atas ke bawah.
• Bila widget yang ingin dimasukkan ke dalam box/scroll box berupa javascript, maka simpan kode tersebut seperti berikut:



<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;height:200px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:auto;background:#ccc;">
Javascript
</div>

Contoh gabungan box dan scroll box

<div style="margin:5px auto;border:2px solid #222; background:#aaa;font-size:11px;font-family:Tahoma;line-height:14px;">

<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;height:70px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:auto;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;">gubhug reyot</h3>
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/CircleGRV66H66.jpg" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #444;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;width:66px;height:66px; " />
Membagi kolom widget menjadi sangat penting untuk menciptakan penampilan blog yang simple, harmonis dan memberikan kesan rapi. Banyaknya hal yang perlu ditampilkan dihalaman blog membuat blogger harus pintar menata sehingga halaman blog terlihat rapi, cantik dan menarik dan jauh dari kesan awut-awutan. Blog tak ubahnya sebuah tempat tinggal yang akan membuat kerasan ketika rumah tinggal tersebut ditata, dipelihara, dihias dan bahkan jika perlu ketika dibangun "mengundang pakar fengshui" dengan 
</div>
<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;height:150px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:auto;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;">Sukarno Sang Proklamator</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZF1GAFt8dCAPMNIW1-C1DS2tbHX5PDnW8Z8AuxyUinSDZDL_8_H_8XJ94kB3-EZJW4lKP2JbhCfwxY7lqHGjg3tNlxuEybrv7SBTjCGj554qPWs_xi12msJezpOKzjIAh45lUwgyf0g/s320/MerahPutihSukarno.jpg" style="float:left;margin:0 8px 5px 0;padding:2px;border:1px solid #444;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;width:110px;height:124px;" />
Tak seorangpun meragukan kehebatan sang Proklamator. Kepiawainya dalam berorasi membuat namanya tak hanya dikenal di seantero negeri. Afrika hingga ujung Amerika Selatan mengenalnya dengan baik sebagai seorang tokoh besar yang mempunyai peran kuat di Asia, Afrika bahkan hingga dunia. Dialah tokoh besar dari sebuah negeri baru merdeka tetapi dengan gagah berani mengatakan &quot;Go to Hell with your aids!&quot;, terhadap si negeri adidaya, Amerika Serikat. Sayang ..., hingga detik ini tak seorangpun tokoh negeri ini mampu meniru atau mewarisi kehebatan dan keberanian Sang Pahlawan Besar tersebut. Mental kerdil penakut sudah menjadi penyakit kronis yang menggerogoti jiwa anak negeri. Buh ..... sungguh memalukan sebenarnya. Ternyata tak satupun punggawa negeri super kaya dan super besar ini seberani Sukarno untuk barang sekedar mempertahankan harga diri dan martabatnya ... memalukan ... sungguh .... !!!
</div>
<div style="margin:10px auto;margin-left:5px;margin-right:5px;padding:10px 6px;border:3px solid #777;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#ccc;">
<h3 style="color:#993300;margin:0 5px 10px;text-transform:uppercase;font-size:14px;">Membagi Kolom Widget</h3>
Membagi kolom widget menjadi sangat penting untuk menciptakan penampilan blog yang simple, harmonis dan memberikan kesan rapi. Banyaknya hal yang perlu ditampilkan dihalaman blog membuat blogger harus pintar ...
</div>

</div>

Untuk menggunakan kode, setelah login ke blogger, klik "Add a Gadget" atau "Tambah Gadget" yang terletak di "Page Elemen" atau "Elemen Halaman", kemudian dilanjutkan dengan klik "HTML/Javascript". Setelah box penambahan widget terlihat copy dan pastekan di dalamnya. KLIK"SAVE/Simpan" dan lihat hasilnya dengan membuka blog.

Tweet