Dan hasil nyatanya sementara ini saya aplikasikan di blog ini
Mau tahu cara buatnya?
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
Simpan hasil pekerjaan sobat
3. Kemudian cari kode <div id='main-wrapper'>, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.
<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Simpan kembali hasil pekerjaan sobat
4. Setelah selesai menyimpan, kemudian sobat ke Layout dan lihat hasilnya.
Tapi kalau sobat bingung saya sudah sediakan kode untuk menambahkan 3 kolom di bawah header, silahkan ikuti langkah 1 dan 2 kemudian ketika tahap 3 masukkan kode ini :
<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Semua tergantung kebutuhan sobat dalam menambahkan widget, dan saya sampaikan terimakasih banyak telah menjadi pembaca setia blog ini :p . Happy blogging sobat and be Thinking Out Of The Box!!
Ok deh Makasih Nih Tipsnya... Saya Pelajari sapa Tau Saya Menemukan Inspirasi :D Sukses Selalu Boz... /lari
ReplyDeleteasyiiiik..ntar lagi akan aku coba. trili..li...li...trala..la..la....
ReplyDeletetapi aa' musti disesuaiin jg ama lebar header nya yak?
ReplyDeletepgn yg 3 kolom hehehe buat gmbr2 aja si
horeeee..aku bisa...wah keren juga tuh. dah aku bikin, barusan. cool deh pokoknya...
ReplyDeletesevbenarnya sih pengen banget nambahin weidget,tapi takut jadi tambah berat
ReplyDelete/hm keren juga....
ReplyDeletetapi kenapa kamu gini --> /bom terus sih??
ampun deh /kembik2.....
jadi tips ini hanya untuk blogspot aja ya?
ReplyDeleteSuhu, mungkin ga nambah kolom disebelah kiri kolom utama?
ReplyDeletesepp!
ReplyDeletemo buka dulu....
yuhui lanjut deh.. mantep /lari
ReplyDeletekang kalau misal nambah 1 kolom untuk sidebar gimana...??kan sidebarku ada 2 kolom diatas 2 kolom itu mau tak tambahi 1 kolom, kayak punya sampyan ini lho.
ReplyDeletethanks sebelumnya
wah ....bagus juga nih....boleh di kantongi nih ilmunya suhu.......
ReplyDeletelanjut suhu.....ilmunya
hemmm jadi bisa neh buat lauoy MSN neh...selsai lebaran diselasaikan semua..hehe
ReplyDeletekren om.......bagus juga neh.....
ReplyDeletewuduw.. ulik2 html lagi yak, oh no.. hehehe wen sering bingungan ni yg beginia mas:D
ReplyDeleteWow, keren nie..
ReplyDeleteSaya bisa gak ya???
@ ade > silahkan
ReplyDelete@ cebong > sudah di bagi persen neng jadi otomatis terbaginya ada cara lain juga yaitu dengan membagi per pixel harus di sesuaikna dengan width headernya.
@ gadis > yups saya sudah lihat blognya diah jadi keren
@ rain > tidak mesti widget yang di pasang bisa hanya tulisan atau profile yang punya blog tergantung kebutuhan
@ jovie > hahahahahaha.... nyindir nih
@ kumpulnet > yups kebetulan blogspot saya bisanya om /hehe
@ gus > bisa om, kalau ada waktu nanti saya akan memposting hal tersebut juga
@ oeoes > bisa kang insya Allah saya bahas juga
@ wendy > learn by doing mba nanti juga bisa
@ wendra > pasti bisa kok wen kalau sering berlatih
@ jaloee > makasih kang /licik , mau tahu tidak kang sumber inspirasi saya adalah akang /kembik2
@ indung > weks.. buka bilang-bilang di sini /lari
sepp, /hore
ReplyDeletekalo buat WP gimana om? /baca
Ini trik barunya mas??ane sih udah bisa nyang ini.hehehe(sombong mode ON).
ReplyDeleteane kenapa ya??beberapa hari ini ga semangat buat nulis, BW, dll. kerjaannya bengong, tidur. buka inet ga tau mo ngapain... /hm
bener2 kurang gairah, kurang tenaga(iklan kalee). Kerjaan ga ad yg dikerjain.../hiks.
Apa ini yang dinamakan fallin in love??/grogi
@ arielz > waduh kang ariel saya masih blank kalau WP mungkin kang arielz bisa yak /licik
ReplyDelete@ herro > /baca yups saya salute dengan ente bro bisa bikin template sendiri ane sendiri lagi mau mengerjakan template juga sih hanya waktunya belum ada /hm yang jelas bukan postingan ini bro, namanya juga rahasia, lagi cari bahannya dulu pokoknya ada deh /licik
wuih... tutorialnya banyak banget... hebat oiy... thx yaa /hore
ReplyDeleteingin kumengerti,tapi tetep gak ngerti buat. bantuin,bisakah?
ReplyDeleteSip2x kerennya tutornya /hore
ReplyDeletesweeep.. aduh keduluan.. tapi gak papa deh... makasih kang infonya.. n juga selamat hari raya idul fitri.. mohon maaf lahir batin... ehh ni bukan spam looo /lari
ReplyDeleteKeren kang tutorialnya, saya kemarin udah nyoba, takbuat satu kolom aja, tapi setelah dipikir-pikir...gak jadi saya pasang, untuk sekarang belum perlu, malah jadi kebanyakan kolom templatenya kang jaloe...wekekekeke...
ReplyDeleteKang request tutorial bikin template 3 coloumn jadi 4 coloumn untuk sidebar kang...
@ qittun > bisa aja mas , hanya kayanya jarang blog atau website yang punya 3 sampai 4 kolom, soalnya makan tempat buat main postnya... nanti saya pertimbangkan dulu soalnya pesanan banyak banget /kringet
ReplyDeletewahhh.. ini yang aku pengin tp blm sempet soalnya masih mudik. kapan2 aku cobain
ReplyDeleteudh aku coba kok malah blogku jadi kepotong antar atas dan bawah. Jadi 3 kolomnya itu bukan di header tp di tengah2. gimana ya???
ReplyDeleteSipp, dah. Wah, ilmunya banyak nih.
ReplyDeleteHehe...
waaa... bagus ni tutorialnya /koprol
ReplyDeleteGak rugi nyasar kemari...banyak ilmunya
ReplyDeletethanks berat lohpak subgya/lari
Asyik langsung praktek nich/lari
ReplyDeleteBos belom bisa
ReplyDeleteada pesan begini
"Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: bordercolor"/hehe
Bos/baca
ReplyDeleteTolong diperjelasin lebih detail
soalnya masih newbie/bisik
takot salah ganti/hm
sekalian Bos kalau mau ganti warna backgroundnya , gimana caranya/hihi
Jadi dach di blog gw
ReplyDeleteKang Mochal gitu loch
Thank banget ya Kang
Tumben belom Bobo Bos
ReplyDeleteDitunggu lloh Bos
Tips2 selanjutnya
Thanks for this widget...master
ReplyDeletemakasih ya tutorialnya..
ReplyDelete#box-main-container {
ReplyDeleteclear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
ada peringatan...?
Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor
Solusinya gimana Bos...?
Udah bisa Bos...gw ganti $bordercolor;
ReplyDeletemenjadi bordercolor;
sorry...ya ngerepotin
terima kasih banyak buanget ye booos...!
ReplyDeleteMaksih..ini baru top cer, beerulang2 kucari buat kolom,, ini yang terbaik buat aQ...
ReplyDeletethanks sobat
Nice tutorial
ReplyDeletehuhuhu..
ReplyDeletekok saia gak ketemu main-wrapper nya yaa ?
saya salah dimana nih gan ?
saya cobain semua kok salah...
makasih banyak kang, tp ntu lebarnya emang harus disesuaikan dgn lebar main wrapper kita kan?
ReplyDeleteTerimakasih pa.setelah beberapa search dan coba sana sini...akhirnya saya menemukan tutorial ini dari bapa. dan saya langsung coba..et dah SUKSES pa...
ReplyDeletesemoga segala kebaikannya dalam berbagi ilmu mendapatkan balasan yang setimpal kelak Amiin.
tapi Insya Allah pa kalau yang selalu mengamalkan ilmunya yakin hidupnya akan penuh keberkahan...
jangan bosen2 ya pa terus berbagi ilmu..bagi kami2 yang pemula ini.
gimana mau bikin kolum di bawah (footer) sepeti di blog kamu ini?
ReplyDelete@miss ekin : sudah pernah saya bahas mba untuk membuat kolom di footer
ReplyDeletethnks bngtzzzzz, berguna bgt buat Ku
ReplyDeletemantap, keren mas. ini yang saya cari-cari
ReplyDeleteWah! Baru tahu nih.. Klo Master2 yg jago buat template, ini sih gak masalah ya.. Makasih
ReplyDeleteWalau belum faham buat edting template, sy numpang cari backlink juga ya di Blog Dofollow ini.. Makasih Kang :D
ReplyDeleteMangstab Mas, thank you...
ReplyDeletemakasih tutornya mastah..
ReplyDeletentar dicoba ^_^
thanks banget om,langsung bisa dipraktekkan sekarang juga
ReplyDeletewaah, patut dicoba nih. gimana ya tapi caranya ?
ReplyDeletewaaahhh dapet ilmu baru.. asseeeeeekk
ReplyDeletematur nuwun kang