Menambah Dua Kolom Diatas/bawah Post Body

Posted By anasku
Mengotak-atik template blogspot adalah hal yang paling menyenangkan apalagi kalau kita berhasil mengotak-atik template blogspot sehingga menjadi bagus dan menarik, pasti lebih senang lagi. Nah kembali ke topik yaitu "Menambah dua kolom dibawah/diatas post body", pengertian post body sendiri yaitu area di blog Anda untuk postingan Anda.

Coba perhatikan gambar dibawah ini muncul dua kolom baru dibawah post blog.



Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya (baca disni untuk gadget/widget blog).

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda?
coba ikuti langkah dibawah ini..

Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>


/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas.
Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan (baca disni untuk tutorial padding dan marginya).

Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

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

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas.

Dan jika ingin menambah dua kolom diatasnya maka taruh
code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau


<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>


Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

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

<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

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

Nah jika semuanya sudah beres tinggal SAVE.

Coba lihat di area page element muncul dua kolom dibawah/diatas post body.

Code-codenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda.

Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja.
semoga bermanfaat bagi Anda semua.
Artikel Terkait untuk "Menambah Dua Kolom Diatas/bawah Post Body"


66 comments:

Jaloee said...

wah sip bro.. mantep info na neh... makin keyen saja

fansblogs said...

Mampir dikit, daripada sepi heheheh

Subagya said...

wekekekekkeke.... banyak cara menuju roma...

Anonymous said...

Wah mantaff ni ilmunya, aku sedot ilmunya ya

Diana Yusuf said...

Tambah hebat nih tutorialnya mas

Anonymous said...

Kalo nambah samping kiri post body gimana ? Ori-nya punya gw khan di kanan, nah kalo nambah dikiri gimana ? Tengkyuu...

Parlin said...

coba dulu ah.......
thanks om......

Anonymous said...

mas kok di blog ku kok susah ya nambah ke bawah, tulung bantuin dunk mas ... :(

yulia madjid said...

weleh2 tambah keren abisz infonya...makasih makasih....mo dicoba neeh. btw yg reedmore udah bisa dan ga dobel2 lagi postingannya..

Mardee W said...

o0o...ternyata daku kurang tag div :K
makane hasilnya aneh..hehehe..
makasih tutorialnya...

JoVie said...

ini dia yang aku cari....anas tahu aja isi hatiku..makasih nih....

RAMKUR said...

Akhirnya nemu juga tutorialnya disini, makasih mas saya udah praktekan dan berhasil....Bravo

Anonymous said...

kok codenya g sama ma punya q ya???
yang code ini
#main-wrapper {
width: 410px;
kok g da???
mohon bantuannya ya!!!

Anonymous said...

manstabbb bos, langsung ke TKP akh

Anonymous said...

Mantep Om... saya contek ilmunya ya??? lumayan nambah widget

Unknown said...

om minta tolong bantuin saya dong , saya newbie nih. trus saya lagi buat blog buat grup saya di paraduta2003.blogspot.com .tolong om untuk tempat komment yang tidak bisa berpindah

Anonymous said...

mas punyaku kok atas bawah ga bisa kanan kiri? tolong bantuannya

Zen M.A.P said...

mas kok punyaku ga bisa jadi dua ya? malah atas bawah?

Anasku said...

@Zen M.A.P
Mungkin pengaturan lebar kolom kiri dan kanan terlalu besar dari pada post body. Anda bisa menyesuaikan lebar kolom kiri dan kanan sehingga bisa sejajar kiri dan kanan :)

Adie said...

wah..
bener-benr jitu neh..


makasi kawan..

Anonymous said...

mantabs ni,,,tp aku coba kok error yak?

ktnya error,,,tulung dunks,,,,gimana ni

abi said...

Cuakeeep infonya, izin mo transfer ilmunya yah.. :D

Bangzabar said...

Boss,,,
aq msh kurang ngerti tentang tab view, bisa tlg jlsin lebih rinci gak?
Law bisa, krm ja ke email ku.
zoloyankey@yahoo.co.id
thanks bwgt ya!!!!!!!!!!!!!!http://www.geocities.com/luq_anas/smiley/smiley-innocent.gif

Anonymous said...

maap sblm na....

sy msh pemula....

sy mo menanyakan gmn cr memindahkan sidebar

blog sy punya sidebar d sebelah kiri dan kanan

sy pengen memindahkan sibebar kiri k kanan

apa bs..????

mohon d jwb via email setiowati@apikon.com

Anasku said...

@yoloYankey

Tunngu artikelnya mas,., hahahaa

IBNU said...

sudah saya praktekkan trims

Unknown said...

:) mas kalo dikasih atas ma bawah bisa pa gak?

Anonymous said...

Wah Muantep bro...ilmunya tinggi. ternyata anak bangsa kita tak kalah ilmu komputernya

hary said...

terima kasih untuk tutorialnya

Deblenks said...

Walah.. Bozz.. Pengen bikin sidebar di sebelah kiri halaman posting "laakok.. Malah jadi ga karuan, ndak bisa aku bozz.. di ajari nape bozz.. Caranya he.. he.. Terima kasih tutorial yg ini bozz.. Walaupun aq blm coba

indoshareddotcom said...

mas kalau di bagi jadi 3 gimana itu ?

sobat said...

numpang baca2 ya

faiz said...

thank's infonya..sangat bermanfaat...main ke blogku juga dong..

indra said...

:( mantab

Al-Mansor Abu said said...

Wah, banyaknya ilmu kamu. terima kasih banyak Ya.

Entrepreneur said...

Semoga Tuhan memberkati kamu.

laskar galuh said...

Thank CUy!!!!


Yaa.. Allah... SEmoga Engkau berkati dia yang mempunyai situs ini yang tlah memberikan ilmu untuk sesama. Amin yaarobal alamin.

Roy Tarihoran said...

mantap bro infonya.
thx.

eciko said...

good.. .kalo bikin sebelah kiri postingan gimana mas...?
tips menjaga keseimbangan otak kiri dan kanan:http://goelsi.blogspot.com.

Anonymous said...

masih bingung nih ko hasilnya kgk nongo ya...alias kgk bisa pucing dagh.... O:

Kenali dan Kunjungi Objek Wisata di Pandeglang said...

thanks kk infonya..

moratmarit said...

Mantab bro..makasih..:)

blogger said...

Mantab..

cah bagoes said...

bermanfaat nih..makasih..:)

foto cewek said...

udah sayacoba dan berhasil...tanks

Blogger Pemula said...

wah keren kawan postingnya...

Bisnis Dahsyat said...

terima kasih bos atas pencerahannya

Unknown said...

mas ko pas saya coba, gag bisa ya
bisanya cuma menambah kolom di atas aja

yoel-anggun said...

lumyan..walo kurang jelas..

'Oniee BeqicHan' said...

Maksih gan atas bawah bisa,oy nambhin penjelasan ada dibawah bgt sblm sidebar
Thx

ary putra said...

makasih tipsnya, tp kok gadjetnya jd 2 ya? double dibawahnya

Unknown said...

sip banget dah...

Anisa film said...

Wah3x. ini baru namanya pembina. thanx berat teman,...........

Unknown said...

Zip...langsung ke TKP, Thanks yo...

ZanKrou said...

Mas...cara buat misahin backround (body)sama outer wrapper gimana????jadi warnaya berbeda...

Didi's said...

trims mas infonya sudah sy coba dan siiif........ banget

la tahzan said...

ngak bisa sob..
T.T

azis said...

Info yang sangat bermanfaat, akan saya coba. terimakasih

Unknown said...

Bingung Banged bro,takut tambah rusak blogku

Ariiv said...

ga bsa nh sob .zz'

http://ex-stoob.blogspot.com

ichank said...

ane newbie nih..
ijin belajar ya


http://ichank2501.blogspot.com

THIS said...

mentebb masbro.. tapi sayang, ane pake templet disgn tu.. ga ada main wrapper binguungggg haha

stive said...

langsung k tkp gan hahaha

m dian wahyu said...

keren gan

mantap dah

ditunggu kunjungan baliknya yach...

http://zi-st.blogspot.com/

Unknown said...

numpang baca gan.

obat kutil kelamin ampuh said...

biar tambah ilmu ngblog

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas