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:

JALOE said...

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

Indra Meissa said...

Mampir dikit, daripada sepi heheheh

subagya said...

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

212 said...

Wah mantaff ni ilmunya, aku sedot ilmunya ya

Syahrizki Rafi' Asy'ari said...

Tambah hebat nih tutorialnya mas

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

maleset said...

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

yulia said...

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

mardee 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

giel said...

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

all my life said...

manstabbb bos, langsung ke TKP akh

churutz said...

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

antony 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

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

sarche 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

ZoloYankey 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

pare widitya 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

bagus andrian said...

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

machdiachmadsyah 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

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

javarino 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

Oktri darmadi said...

wah keren kawan postingnya...

Bisnis Dahsyat said...

terima kasih bos atas pencerahannya

Newbie Blogger 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

mas iwan said...

sip banget dah...

ismailsalim003 said...

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

Van De Lok's WellArt 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

agus_ajah said...

ngak bisa sob..
T.T

azis said...

Info yang sangat bermanfaat, akan saya coba. terimakasih

Untuk Para Pengabdi 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

Geon said...

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

stive said...

langsung k tkp gan hahaha

PŖīŋćē Wâĥŷư said...

keren gan

mantap dah

ditunggu kunjungan baliknya yach...

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

Niaga jaya 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