Cara Membuat 2 Kolom Elemen di Bawah Postingan

Cara Menambah 2 Kolom Elemen di bawah Postingan - Utak - atik template blog memang banyak manfaatnya, bukti nya karena hoby saya meng permak template, beberapa hari lalu saya berhasil membuat 2 template sendiri yaitu tatelu blogger template dan tatelu blogger template V2. Dan kali ini saya juga berhasil membuat 2 kolom elemen di bawah postingan / artikel.

Sekedar ngasih tahu, Kolom Elemen berbeda dengan  Kolom biasa, bedahnya bisa sobat lihat di Elemen laman. Kalau kolom elemen, pada elemen laman akan muncul elemen baru yang bisa sobat pasangi widget (add gadget ) tanpa perlu edit Html namun tak bisa di pasang dalam artikel sedangkan kolom biasa adalah sebaliknya.


Sepeti yang telah saya bilang di atas, bahwa cara membuat 2 kolom elemen di bawah postingan ini saya tahu dari kegemaran saya untuk meng - permak template jadi saran saya bagi sobat yang newbie kayak saya, jangan takut untuk meng utak - atik template, toch kalau eror kan bisa di cegah dan atasi.

Sobat yang tertarik memasang 2 kolom elemen di bawah postingan, silahkan ikuti tutorial berikut.
1. Masuk ke dashboard sobat.
2. klik Rancangan --> Edit HTML
3. Cari kode berikut.
#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 */
  }

tambahan :
Fokuskan pencarian pada kode berwarna biru.

4. Letakkan kode berikut di bawah kode pada langkah 3.
#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 begini :

#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.
<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. Klik simpan dan lihat hasilnya pada elemen laman. Jika sudah ada 2 kolom add gadget di bawah postingan berarti tricknya berhasil.

Sekian dulu sob!!!

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat 2 Kolom Elemen di Bawah Postingan. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

27 comments

wah.. mantep bang artikelnya!!!

jarang nemuin nich....

tutornya mantep... btw untuk yang 3 kolom ada gak mas?
tukeran link yuk kalo bersedia :)

22:14:00

@Widhi | Motivasiuntuk yang 3 kolom entar ta' posting...

tukar link?? tentu boleh... linknya sudah saya pasang di menu link sobat..

mohon di cek.. makasih kunjungannya!!!

makasih bnyk nih gan infonya. sangta membantu

langsung aja nich gan di coba,,,, thanks ya

wuih keren sob, tapi terkadang template buatan pihak ketiga sudah banyak yang sudah dilengkapi element tersebut kecuali bawaan blogger. tapi infonya bisa dijadikan pembelajaran

19:30:00

@Polbeng Kidziya soch bro!!!

makasih ya sudah berkunjung...

thanks sob..

Place Cozt
Info Perkembangan Bisnis VGMC sob

05:57:00

template bawaan blogger gimana bos??

langsung dicoba dan berhasil kang, terima kasih atas tutorialnya

Setelah saya praktekkan hasilnya memuaskan bro, saya poles dikit dengan merubah background. trima kasih bro ilmunya. sorry praktek dulu baru minta izin hehehe

05:52:00

kode yang harus dicari tidak ditemukan di kode html template saya, gimana solusinya gan?

ko punya saya ga bisa ya sob..???
mohon bantuannya ya...
Salam kenal dan izin follow ya...

tutornya mudah dipahami mas, dan mudah diterapkan kedalam template, makasih ya..

Makasih mas atas cara caranya, salam blogger wonogiri

gk berhasil-berhasil om saya menbuatnya susah sekali om soalnya masih pemula. tapi terimakasih banyak om sudah share informasinya.

ane coba dulu ya gan,,

makasih mas atas posting yg selama ini saya cari ..
izin copy..
kalau ada waktu kunjungi blog ane sob..
http://alharifan.blogspot.com/


Hanya dengan Menginstall Software Ini ke
PC / Komputer / Laptop Anda, dan Melakukan Sedikit "TRIK RAHASIA", Maka Saldo Rekening Bank Anda Akan Bertambah Ratusan Ribu Hingga Jutaan Rupiah Per Hari..!!

Info Lengkap Klik Link Dibawah ini :
http://ow.ly/hy0Rb

Terimakasih

berhasil sob, thanks :D

00:25:00

siibbb...

Kode lain selain main-wrapper apa ya? Di template saya gak punya main-wrapper nih. Main-inner kah?

thank you man :) hehehhe

18:01:00

sudah ngikutin apa yang dibahas di atas kok saya tdk beerhasil sob..?

kalo di HTML yang baru gimana caranya mas ???
saya dari admin blog Blank Blank,,

mohon di beritahu ya mas dnegan kunjungan balik,
mkasih

Di tempalet saya gak ditemukan yang dicari mau diganti gan,,,

18:25:00

hehehe mantap banget bro tipsnya

02:39:00

terimakasih gan punya ane berhasil ni hehehe

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.