Saturday, November 24, 2012

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....

4 Komentar "Cara Membuat 2 Kolom Di Bawah Kolom Postingan"

Unknown November 24, 2012 at 7:30 PM WIB Permalink

nice post sobat...
btw, link sobat sudah saya pasang di blog saya..
sekarang tinggal link saya pasang di blog sobat..
http://rahmat-kriz.blogspot.com

Aries_Bro November 24, 2012 at 7:56 PM WIB Permalink

ok sobat...

Unknown December 13, 2012 at 1:06 PM WIB Permalink

Link ex dong :D link ente udah ane simpen di blog ane :D tinggal ente naro link ane :D http://noval4rtblog.blogspot.com/

Baca Selengkapnya Di Sini: http://acimblogs.blogspot.com/2012/11/penyebab-judul-artikel-tidak-terdeteksi.html#ixzz2EuRYugu1

MikiMaru December 17, 2012 at 1:40 PM WIB Permalink

Ok lah Bro Makasih Tutorialnya