postingan dengan 2 div

EKO Mr. GALAU 2012

mari kita belajar bersama mempercantik blog HTML ekonovabudisaputro.blogspot.com
JANGANLAH TAKUT AKAN JATUH CINTA KARENA SEMUA ORANG PASTI PERNAH MERASAKAN SAKIT HATI.
HTML mr. galau.com

Membuat Postingan Dua Kolom dengan DIV

3 Apr 2012

Ditulis Oleh: EKO Mr. GALAU 4.5 di Selasa, April 03, 2012

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Inspirasi memang selalu datang dari mana saja termasuk dari postingan sahabat pembaca Sakahayang Dot Com  dan blog lain yang saya kunjungi.   Seperti artikel ini Membuat Postingan Dua Kolom dengan DIV  inspirasinya terlahir saat membaca di beberapa blog  yang membahas  cara membuat postingan menjadi 2 kolom.

Pembahasan mereka yang saya tangkap  selalu  menggunakan tag html table  sama dengan  trick memasang iklan di samping kotak komentar pada artikel Pasang Iklan di Sebelah Kotak Komentar yang telah saya bicarakan sebelumnya.  Nah sekarang saya mencoba berkreasi membuat kolom menggunakan tag DIV tidak menggunakan tag TABLE

 

Seperti yang sudah saya katakan pada artikel Cara Menyisipkan Iklan pada Postingan bahwasanya tag HTML DIV adalah tag yang super sakti bisa diatur sekehendak web designer. Coba anda  telaah template blog milik anda sendiri. Hampir semua cell dibangun oleh tag DIV. Betul ???

Contohnya  Blog Sakahayang , terdiri dari header 1 kolom,  body 3 kolom  terdiri dari area postingan, middle bar yang diisi oleh berbagai widget, dan sidebar yang dihuni oleh banner iklan.

Dan terakhir footer hanya  satu kolom. Kolom-kolom tersebut semua dibangun oleh tag DIV.

Sekarang pertanyaannya mengapa bisa menjadi  berbentuk kolom-kolom  yang teratur? Jawabannya adalah semua  tag DIV diatur posisinya oleh style  yang biasa anda kenal dengan istilah CSS (Cascading Style Sheets). Nah ketahuan dech kuncinya adalah CSS. Jadi jika kita akrab bermain-main dengan CSS kita pasti bisa membuat template blog buatan sendiri. Nggak Percaya ?

 
 
OK kembali ke topik pembahasan Membuat Postingan Dua Kolom dengan DIV  dan kembali lagi ke satu kolom hehehehe,,,,

Bagi yang tertarik silahkan ikuti tutorial ini.
Pada editor blog dengan mode HTML  pertama kita setting CSS-nya di awal postingan,  Code CSS-nya tampak seperti di bawah ini.

<style type="text/css">
div.sakahayang_wrapper{
    width: 500px;
}

div.sakahayang_left_box{
    float: left;
    padding: 5px;
    width: 240px;
    border: none;
    text-align: justify;
}

div.sakahayang_right_box{
    float: right;
    padding: 5px;
    width: 240px;
    border: none;
    text-align: justify;
}
</style>

1. div.sakahayang_wrapper  adalah pendefinisian lebar postingan. 500px sesuaikan dengan lebar area postinga blog anda.
2. div.sakahayang_left_box adalah pendefinisian kolom sebelah kiri, terlihat dari setting float : left
3. div.sakahayang_right_box  adalah pendefinisian kolom sebelah kiri, terlihat dari setting float : right
4. width adalah lebar kolom dan padding adalah jarak antara tepi kolom dengan tulisan kiri kanan
5. penjumlahan lebar kolom  dan padding  harus lebih kecil atau sama dengan  lebar postingan. Formulanya sbb. :
   jumlah kolom * ( lebar kolom + 2 * padding ) <= lebar postingan
   
   
   2 * ( 240 + 2 * 5 ) = 2 * 250 = 500   kebetulan angkanya tepat sama dengan lebar postingan.

CSS code di atas bisa juga anda simpan di header blog   tepat diatas ]]></b:skin> dengan tanpa mencantumkan yang berwarna merah.


Kemudian pada editor blog masih dengan mode HTML copy  paste code berikut

<div class="sakahayang_wrapper">
   <div class="sakahayang_left_box">
Ini di Sebelah Kiri. Ini di Sebelah Kiri.
   </div>
   <div class="sakahayang_right_box">
Ini di Sebelah Kanan. Ini di Sebelah Kanan.
    </div>
</div>
<br />&nbsp;
<br />&nbsp;

Overwrite Ini di Sebelah Kiri. dan Ini di Sebelah Kanan  dengan postingan anda dimana editor bisa menggunakan mode HTML atau Compose

Selamat berkreasi ,,,,,

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين