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!!!
Previous
Next Post »

27 comments

Write comments
17:55:00 delete

wah.. mantep bang artikelnya!!!

jarang nemuin nich....

Reply
avatar
20:45:00 delete

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

Reply
avatar
Christian
AUTHOR
22:14:00 delete

@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!!!

Reply
avatar
23:42:00 delete

makasih bnyk nih gan infonya. sangta membantu

Reply
avatar
20:19:00 delete

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

Reply
avatar
Polbeng Kidz
AUTHOR
19:26:00 delete

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

Reply
avatar
Christian
AUTHOR
19:30:00 delete

@Polbeng Kidziya soch bro!!!

makasih ya sudah berkunjung...

Reply
avatar
Ridwan Ratman
AUTHOR
20:34:00 delete

thanks sob..

Place Cozt
Info Perkembangan Bisnis VGMC sob

Reply
avatar
roomantik
AUTHOR
05:57:00 delete

template bawaan blogger gimana bos??

Reply
avatar
ian foldism
AUTHOR
04:26:00 delete

langsung dicoba dan berhasil kang, terima kasih atas tutorialnya

Reply
avatar
Jakarta Spa
AUTHOR
02:14:00 delete

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

Reply
avatar
Abu Alya
AUTHOR
05:52:00 delete

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

Reply
avatar
18:15:00 delete

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

Reply
avatar
Sriwahyuni
AUTHOR
21:27:00 delete

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

Reply
avatar
07:44:00 delete

Makasih mas atas cara caranya, salam blogger wonogiri

Reply
avatar
Chord Gitar
AUTHOR
07:40:00 delete

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

Reply
avatar
blog wapjo
AUTHOR
17:48:00 delete

ane coba dulu ya gan,,

Reply
avatar
Al Harifan
AUTHOR
09:04:00 delete

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

Reply
avatar
Idi Suwardi
AUTHOR
23:46:00 delete

berhasil sob, thanks :D

Reply
avatar
ian
AUTHOR
00:25:00 delete

siibbb...

Reply
avatar
20:57:00 delete

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

Reply
avatar
06:21:00 delete

thank you man :) hehehhe

Reply
avatar
Naz Cules
AUTHOR
18:01:00 delete

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

Reply
avatar
Anonymous
AUTHOR
18:26:00 delete

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

mohon di beritahu ya mas dnegan kunjungan balik,
mkasih

Reply
avatar
23:15:00 delete

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

Reply
avatar
Hanif
AUTHOR
18:25:00 delete

hehehe mantap banget bro tipsnya

Reply
avatar
mandala
AUTHOR
02:39:00 delete

terimakasih gan punya ane berhasil ni hehehe

Reply
avatar