Cara Membuat 2 Kolom Di Bawah Kolom Postingan

Kali ini dalam artikel ini Saya akan membagi ilmu dan sekaligus menjawab pertanyaan dari sahabat Kutip Ilmu yang bertanya tentang Cara Membuat 2 Kolom Di BawahKolom Postingan. Trik ini sangat tepat apabila sahabat ingin mempercantik tampilan Blog anda karna dengan membuat 2 elemen di bawah Kolom Postingan(main-wrapper) maka anda meminimalisir widget yang menumpuk. Saya sudah mencoba trik ini pada template yang akan saya Rilis untuk postingan Blog saya. Hasil dari trik ini adalah sebagai berikut :

Jika trik ini yang sahabat cari maka sahabat datang pada Blog yang tepat, Langsung aja ikuti langkah – langkah berikut Cekidot :

1. Masuk Akun Blog Sahabat .
2. klik Template > Edit HTML
3. Cari kode yang Berwarna Biru (Gunakan jalan pintas Ctrl +F utnuk mempermudah pencarian).

#main-wrapper {   width: 500px;   float: $startSide; margin:20px   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   }

4. Copy kode berikut di bawah kode yang  di Atas.

#main { width:500px; float:center; } #main-left{ border:1px solid #000000; padding:10px; width: 225px; float:left; } #main-right{ border:1px solid #000000; padding:10px; width: 225px; float:right; }

kira - kira hasilnya Sperti :

#main-wrapper {   width: 500px;   float: $startSide; margin:20px   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   } #main { width:500px; float:center; } #main-left{ border:1px solid #000000; padding:10px; width: 225px; float:left; } #main-right{ border:1px solid #000000; padding:10px; width: 225px; float:right; }

5. Selanjutanya cari kode  berikut dengan cara sperti yang kita lakukan di atas.

<div id='main-wrapper'>         <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section>       </div>

ganti kode tersebut dengan kode berikut.

<div id='main-wrapper'> <div id='main'>         <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> </b:section> <b:section class='main-left' id='main-left' style='width: 225px; float: left;'> </b:section> <b:section class='main-right' id='main-right' style='width: 225px; float: right;'> </b:section> </div> </div>

6. Lalu simpan dan lihat hasilnya pada Tata Letak. Jika sudah hasilnya sperti gambar di atas maka Sahabat telah sukses Mengutip Ilmu.
Sekian Dari MengutipIlmu.Blogspot.com Jangan takut gagal karna kegagalan adalah awal dari keberhasilan saya ADMIN mengutip ilmu inilah Blog Saya...LEBAY....

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest