Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.



Template Blogger 2 Kolom Jadi 3 KolomTutorial Blogger proBlogiz kali ini sharing tip dan trik cara membuat atau merubah Template Blogger 2 Kolom Jadi 3 Kolom, yang bisa bermanfaat untuk Anda yang ingin tampilan template blog lebih maksimal. Secara default template 2 kolom mempunya satu kolom sidebar dikiri atau dikanan dari elemen post blog (elemen main). Tentu Anda bisa membuat dengan merubahnya atau menambahnya menjadi 3 kolom yaitu dua kolom sidebar baik sidebar kiri dan kanan atau semuanya berada di kanan atau kiri. Design blog atau template seperti ini biasanya disesuaikan dengan kebutuhan penempatan widget-widget di blog. Membuat template menjadi 3 kolom tidaklah sulit asal Anda benar-benar mengikuti tutorial dan tip-trik dibawah ini.

Sebelumnya saya akan memberikan contoh yang telah saya buat dengan metode ini pada template minima 2 kolom menjadi 3 kolom 2 right sidebar. Anda juga bisa melihat Demo dan Download hasilnya, pada link yang telah disediakan dibawah. Artikel ini saya harus update kembali karena beberapa pembaca Blogger mengalami kesulitan atau gagal menerapkan metode/cara menambah 3 kolom pada blogger template ini.

template minima 2 kolom
template minima 2 kolom sebelum dirubah
template minima 3 kolom
template minima setelah dirubah menjadi 3 kolom 2 right sidebar

Ada baiknya Anda download contoh template yang telah dibuat ini, dan coba lihat file XML-nya dengan notepad atau wordpad. Anda akan menemui kode-kode css dan html sama persis yang saya gunakan dibawah ini : #outer-wrapper {width: 840px;....}, begitu juga dengan ukuran sidebar, padding, float dll.

Kembali saya ingin mengingatkan jika Anda ingin merubah template yang Anda gunakan sekarang, bisa jadi  hasilnya berbeda, dikarenakan ada beberapa perbedaan kode-kode template Anda dengan kode yang saya gunakan ini (template minima), namun perbedaan itu bisa diatasi jika memahami kode-kode (CSS dan HTML) pada template yang Anda gunakan. Sebagai contoh: ukuran (#outer-wrapper ; #main-wrapper ; #sidebar-wrapper), mengatur kembali padding antara main-wrapper dengan sidebar (agar sesuai dengan outer-wrapper).

Pada dasarnya untuk menambah kolom sidebar baik itu sidebar kiri atau sidebar kanan yang Anda harus perhatikan adalah kode-kode seperti : #outer-wrapper ; #main-wrapper ;  #sidebar-wrapper  , sebab kode inilah yang nantinya kita rubah di template.

Sebagai contoh template Anda sekarang adalah template sederhana seperti Minima Template, umumnya menggunakan lebar/ width  #outer-wrapper : 660 px dan #main-wrapper : 410 px, #sidebar-wrapper : 220px   , kalau Anda mau menambah kolom sidebar baru ukuran 180 px misalnya, maka otomatis Anda harus menambah ukuran #outer-wrapper = #main-wrapper + #sidebar-wrapper + #sidebarbaru-wrapper + margin left.

#outer-wrapper  = 410 px + 220 px + 180 px + 20 px = 830 px

Agar sidebar tidak berdempetan dengan main elemen berikan jarak antara keduanya 10 px, sehingga ukuran
 #outer-wrapper  = 840 px


Trik Membuat 3 Kolom Pada Blogger Template


Masuk ke Blogger >>> Edit HTML Template
  • backup template Anda yang sekarang (unduh lengkap) untuk antisipasi jika error
  • jangan centang Expand Template Widget
  • tekan F3 untuk pencarian
Perhatikan kode css tersebut :

/* Outer-Wrapper ------------------------------------------ */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 410px; float: left; 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 */ } #sidebar-wrapper { width: 220px; float: right; 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 */ }
Fokuskan pada kode-kode yang diwaranai diatas, dan lakukan trik tersebut :
rubah #outer-wrapper width: 660px menjadi 840 px
tambahkan  padding-left:10px; pada #sidebar-wrapper 
Tambahkan kode kolom baru ini :
#sidebarbaru-wrapper { width: 180px; float: right; padding-left:10px; 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 */ }
Sehingga  kodenya menjadi seperti ini :

/* Outer-Wrapper ------------------------------------------ */ #outer-wrapper { width: 840px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 410px; float: left; 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 */ } #sidebar-wrapper { width: 220px; float: right; padding-left:10px; 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 */ } #sidebarbaru-wrapper { width: 180px; float: right; padding-left:10px; 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 */ } *float: right; >> menempatkan sidebar lama sebelah kanan

 Setelah pemasangan kode css sidebar baru telah selesai,selanjutnya Anda juga perlu memasang code id sidebar baru pada body template.

Kode id sidebar baru Anda, buatlah seperti ini:

<div id='sidebarbaru-wrapper'> <b:section class='sidebar' id='sidebarbaru' preferred='yes'/> </div>
Tambahkan kode id sidebaru tersebut dibawah kode HTML berikut :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>.....widget.........</b:section> </div>
Sehingga kalau digabungkan kode id tersebut menjadi kurang lebih seperti ini :

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/> </b:section> </div> <div id='sidebarbaru-wrapper'> <b:section class='sidebar' id='sidebarbaru' preferred='yes'/> </div> Setelah langkah diatas selesai, maka Save Template

Dua kolom Template Blogger Anda sekarang telah menjadi 3 kolom template dengan dua kolom sidebar sebelah kanan kolom main (post blog elemen). Untuk melihat dan memastikan hasil perubahan Anda bisa cek di Tata Letak, disini Anda bisa melihat lay out template telah menjadi 3 kolom.

Tambahkan widget baru di kolom sidebaru Anda, dan lihat hasilnya.
note : agar tampilan template lebih proporsional Anda juga bisa merubah ukuran lebar (width) #header-wrapper  dan #footer dengan ukuran yang sama pada  #outer-wrapper yaitu 840 px.
Selamat dicoba sobat......
Jika Anda masih bingung tentang trik cara Membuat Template Blogger 2 Kolom Jadi 3 Kolomsilahkan bertanya di form komentar dibawah ini.....dan jangan lupa jempolnya!!!

Update: Susunan Kode HTML kurang lebih seperti ini:
<div id="main-wrapper">...</div> <div id="sidebarbaru-wrapper">..</div> <div id="sidebar-wrapper">....</div>

Baca Juga Artikel >>> Cara Buat Kolom Sidebar di Kiri dan Kanan


Artikel Terkait Lainnya:
Click here for comments

43 komentar

kok nggak bisa yh http://ptik-unm.blogspot.com

REPLY

maaf mas bag mana yang ga bisa....
yg perlu diperhatikan width, #main-wrapper {, #outer-wrapper {#sidebar-wrapper {
memang harus sabar dan teliti...
untuk blog anda #outer-wrapper :width:925px,#main-wrapper:580px
untuk penambahan sidebaru anda harus tahu #outer-wrapper width template,
lihat lagi perhitungannya diatas gan...hehe
saya ambil contoh template minima blogger





REPLY

Boz, gmn cara pasang iklansolusi bau mulut, napas, obesitas dan kurus, masalah kerusakan rambutRiza, 0857 4194 1815

REPLY

saya akan coba gan... makasih ya....

REPLY

di template saya ga ada #main-wrapper
gmana solusinya??

REPLY

alamat blognya kasi tau gan, biar saya tau template Anda
coba cari #contain-wraper?

REPLY

keren om blognya, he he he tapi aku ga bisa pakenya..salam kenal om

REPLY

blognya keren, pengen coba ah..makasih om, salam kenal

REPLY

@kitabasmikorupsi:
thanks gan
@Ahmad Lukman Nulhakim:
terima kasih dah mampir
alamat blognya mana gan:)

REPLY

Tips triknya mantab gan,izin cobain memodifikasikan blog saya.

REPLY

di blog ngga ada #outer-wrapper, gan. Mohon solusinya. makasih

REPLY

Mau tanya gan, templete saya sdh 3 kolom, total 2 kolom sidebar 380px, masing2 sidebar bs dirubah tp tdk bs melebihi 380px, sepertinya terkunci, outer-wrapper 950px, main-wrapper sdh dikecilkan jd 300px, tetap total sidebar tetap tdk mau dirubah, silahkan dilihat dlu di http://infounixs.blogspot.com/

REPLY

dittunggu solusi dan komentarnya di buku tamu http://infounixs.blogspot.com/
mksh sebelumnya..

REPLY

@hanif: saya udah coba lihat css template Anda dan saya juga coba terapkan menggunakan css persis seperti yang ada di template Anda, kurang lebih css ditemplate Anda:

#outer-wrapper{width:950px;....}
#content-wrapper{background:#fff;border-top:2px solid #ffcc00;}
#main-wrapper{width:400px...}
#lsidebar-wrapper{width:250px;float:left....}
#rsidebar-wrapper{width:250px;float:right;....}


namun hasilnya OK!! berhasil saya terapkan, tidak ada masalah dengan ukuran margin atau paddingnya.
aneh juga di blog kamu sidebar kedua (rsidebar) posisinya tidak normal.
Solusinya, pertama saya mengira ukuran margin left-right penyebabnya, tapi bukan itu!! semua ok dan berhasil saya terapkan menggunakan template minima.
1. Coba kamu edit lagi widget2nya ( attribution )widget yang pk javascript, widget Cek Berat Blog. widget yang ga penting bgt di hapus dl semntara kemudian cek lagi hasilnya.
2. opsi kedua ini jarang terjadi tapi sy pernah ngalami, coba kamu cek post yang ada yang ada hompepage di post editor, dan cek apakah posisi waktu terakhir anda publikasikan maish dalam mode edtior HTML ga, klo ya ganti di posisi Compose (normal) dan perbarui post ( tapi ini kecil kemungkinanya saya lihat km ga da script iklan di post)
3. coba kirimkan saya copy kode template anda klo bisa tanpa expand widget
sementara itu dulu sob:)

oya klo mo lihat hasilnya template yg saya gunakan dengan menerapkan kode css template Anda, klik aja linknya;
Contoh Hanif template

REPLY

@hanif: coba juga penempatan kode <div id="box3"> untuk Link sahabat itu, kemungkinan penyebabnya....coba aja diedit lagi posisi dan kodenya widget itu.

REPLY

bagus bgt mas postingnya, mw dipraktekin tp masih bingung. sy mau nambah kolom sebelah kiri, trus supaya tiap kolom kanan dan kiri lebarnya sama dengan lebar kolom box postingan sy gimana caranya ya mas ? matur nuwun...

REPLY

tinggal disamakan aja mas lebarnya ,contoh:
#main-wrapper{width:300px...}
#sidebar-wrapper{width:300px;float:left....}
#sidebar2-wrapper{width:300x;float:right;....}

asal jangan lebih dari lebar #outer-wrapper{width:950px;....}

REPLY

kalau template bawaan dari perancang template gemana mas...?, soalnya kode-kode:
outer-wrapper, main-wrapper dan contain-wraper...
tidak ada gang..mohon solusinya..????

REPLY

sebenarnya ada, cuma nama kodenya yang dibuat berbeda
sayang ga da blog addressnya

REPLY

Mantap Mass...! sngt berguna bwt kami blogger baru,,mau tanya lagi bagaimana membuat kolom widget baru (ntuk iklan/banner) dikolom sidebar kiri/kanan, yang bwt bingung kode htmlnya letaknya diposisi mana? mohon contoh & jwbanya..!! Trims.. rajatonggo@gmail.com (http://bpunkblog.blogspot.com )

REPLY

kalau di kanan pasang di html <b:section class='sidebar' id='kolom iklan' preferred='yes'/> iklannya dibawah sidebar utama bos:)
coba cek di http://problogiz.blogspot.com/2012/12/menambah-2-kolom-di-bawah-sidebar-utama.html
mungkin bs bantu

REPLY

kalau utk blog saya ini gimana pak?
http://herbamurah.asli.ws/

REPLY

http://infotrendz.blogspot.com/---------> blog ane tlong dibantu gan bagaimana nambahin widget kolom paling kiri coz sy pake blogspot tampilan baru,,,mksh sblmnya

REPLY

kode div id=sidebar-wrapper koq gak ada ya gan di html saya?

REPLY

informasi yang bagus mas.tapi penerapanya ke blog saya punya koq ga bisa2 ya?ukuran outer wrapper dan lainya udah dirubah.memang sudah ada perubahan dengan adanya tambahan space untuk sidebar baru disamping kanan postingan.tapi koq sidebarnya ga muncul juga seperti sidebar pertama yang dikanan.tlg dibantu mas dimana salahnya.ini blog saya http://rocatemplate.blogspot.com/

REPLY

halo...sepertinya penempatan kode HTML-nya ada yang salah, seharusnya kode html untuk sidebar dengan id="lsidebar-wrapper", lengkapnya:
<div id="lsidebar-wrapper">
<div class="lsidebar section" id="lsidebar"></div>
</div>

jangan ditempatkan didalam <div id="main-wrapper">......</div>
seharusnya jika Anda ingin membuat 2 kolom sidebar sebelh kanan semua susunan kodenya jadi sperti ini:
<div id="main-wrapper">...</div>
<div id="sidebarbaru-wrapper">..</div>
<div id="sidebar-wrapper">....</div>


Jika kolom sidebar ingin dtempatkan kanan kiri main post, susunan jadi seperti ini:
<div id="sidebarbaru-wrapper">..</div>
<div id="main-wrapper">...</div>
<div id="sidebar-wrapper">....</div>


Dicoba dulu, seperti diatas, mas..
Oya mas itu tolong dihapus kontennya yang copas artikelnya, kan bisa iindeks google search, bisa duplikat kontent nanti..
Terima kasih

REPLY

oke mas tank you banget dah atas bantuanya.content akan saya hapus mas.content tsb bukan saya gunakan untuk postingan blog saya.itu hanya conten percobaan saja.conten asli saya ada di :http://myrecoveryboiler.blogspot.com/

REPLY

masih bingung juga mas saya.penempatan yang mas jelaskan diatas.tlg dibantu lage ya mas.apa perlu saya kirimkan kode template saya mas?thank u mas.

REPLY

boleh aja mas,.....kemren sy lihat susunan htmlnya kira2 seperti ini:
<div id="main-wrapper">
<div id="rsidebar-wrapper">....</div>

...</div>
<div id="lsidebar-wrapper">..</div>

seharusnya begini:
<div id="main-wrapper">...</div>
<div id="lsidebar-wrapper">..</div>
<div id="rsidebar-wrapper">....</div>



REPLY

kenapa ga didownload aja template mas, contohnya diatas nanti tinggal disesuaikan aja

REPLY

kode html template saya ga bisa dilampirkan mas,gimana ne? format xml.penggunaan kolom convert disebelah kiri ini saya kurang faham mas.setelah kode html template saya convert trus saya copy lage dan saya kirimpun ga bisa?tlg bantuanya mas?template saya aslinya bernama Roca blogger template.

REPLY

Mas...ini saya buat contoh dengan pake Roca blogger template, Anda bisa lihat hasilnya di http://problogcoba.blogspot.com/, atau anda bisa download di https://docs.google.com/file/d/0B1Hm1QI7unqDYmZlQzAyTXpvZnM

Contoh diatas saya rubah beberapa css, berikut:
#main-wrapper{width:400px;}

ditambah sidebar baru:
#lsidebar-wrapper {width:190px;float:left;padding-right:15px;margin-left:15px;margin-right:0px;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 */
}

Kemudian buat kode HTML baru untuk leftsidebar:
<div id='lsidebar-wrapper'>
<b:section class='sidebar' id='sidebarleft' preferred='yes'/>
</div>


isi dengan widget di tata-letak blogger nanti, semoga bisa membantu
cu....



REPLY

thanks a lot for the info,, permit try yaa .... http://goo.gl/qqb2t8

REPLY

Bisa dicoba nih di blog pribadi saya

Paket wisata karimun jawa, buka http://karimunjawamenjanganresort.com

REPLY

rumah dijual murah, harga rumah knock down kayu jati kuno mulai 20 jutaan.

RUMAH JAWA JOGJA adalah perusahaan jual beli rumah jawa dan pemborong bangunan untuk hunian, penginapan, pendopo, rumah makan, resort, guest house, villa dan lain sebagainya. Tim ahli dan segala keperluan pembangunan yang Anda butuhkan semua ada pada kami sehingga memudahkan Anda mengontrol pembangunan hanya dengan satu pintu.


Layanan kami meliputi :

-Jual beli rumah limasan, rumah joglo, rumah kampung, rumah geladak, lintring, gazebo, kandang sapi /kandang kebo, gebyok dll,

-Jasa bongkar pasang dan setting ulang segala type rumah jawa knock down,

-Pemborong bangunan,

- Arsitek,

-Konsultan,

-Desain taman,

-Desain Interior dan Eksterior.

-Dll.


RUMAH JAWA JOGJA beda dengan yang lain karena kami bukan sekedar MEMBANGUN RUMAH namun kami MEMBANGUN HUNIAN yang layak, artistik, keren, aman, nyaman dan sesuai dengan kebutuhan Anda.

Jasa yang kami tawarkan juga sangat berbeda dengan yang lainnya karena kami selalu memberikan pelayanan terbaik, tenaga kerja yang ahli dibidangnya, terlatih, profesional, loyal, jujur, berdedikasi, bertanggung jawab dan selalu mengedepankan keamanan sesuai dengan standar kontruksi di Indonesia.

Dengan pengalaman serta kemampuan yang kami miliki dan tenaga kerja berpengalaman yang ahli dibidang arsitektur rumah jawa, membuat kami yakin bahwa kami dapat membantu mewujudkan rumah impian anda.

Recomended link:
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo
rumah joglo

REPLY

isa dicoba nih di blog pribadi saya
paket wisata bromo http://bromoguide.com

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|