32 Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Tutorial kali ini kembali kita akan belajar desain template, sebelumnya saya pernah membahas cara menambahkan elemen halaman atau kolom tambah gadget dibawah header. Nah sekarang kita akan belajar cara menambahkan elemen halaman dibawah header menjadi dua, tiga kolom atau multi kolom, seperti screenshot berikut.
menambahkan 2 kolom baru dibawah header
menambahkan 3 kolom baru dibawah header
Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):
<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>
Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>
<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>
3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Semoga bermanfaat. I hope you enjoyed this tutorial comments are welcome see my result
menambah tiga kolom elemen halaman dibawah header


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

32 komentar :

  1. Pertamaaxx...hehe
    wow, keren banget Ukh...nanti deh coba2nya di blog laen, sambil berlajar edit template :-)
    makasih telah berbagi

    BalasHapus
  2. keduaxx, wleh mantep ilmunya..
    terus sharing yahh..

    salam blogger:)

    BalasHapus
  3. kalau ini mah keren abis.... pengen Rizky coba

    BalasHapus
  4. sajiannya memang selalu menarik

    mantap...
    mantap...

    sukses ya

    salam

    BalasHapus
  5. terimakasih apresiasinya

    BalasHapus
  6. langsung saya save. dicoba, mau pake blogspot juga

    BalasHapus
  7. Infonya keren,
    Makasih sharingnya

    BalasHapus
  8. sama2, terimakasih jg apresiasix

    BalasHapus
  9. Wah, keren juga ya jadinya. Saya mau nyoba dulu ah di blog percobaan. Thx buat tipsnya.

    BalasHapus
  10. Silahkan, semoga berhasil. Terimakasih jg tuk apresiasinya.

    BalasHapus
  11. wah jago bner neh. thx.. mo coba2 ah..
    saling kunjung yah..
    yuk semua berkunjung k tempatku ada yang baru neh dijamin rugi klo ga baca..

    BalasHapus
  12. terimakasih apresiasinya

    BalasHapus
  13. ngak ada masalah sob, bila-bila aja boleh hantar pasti seri terima.

    BalasHapus
  14. salam..wah yg template baru...karen Ukh...ini hasil kreasi ukhti sendiri ya?? ck ck ck..
    Ukh, ajari sy buat top visitor yg dibawah itu dong..makasih y sblemunya.

    BalasHapus
  15. @ BlogspotTemplateCollection: Terimakasih sob, ukhty seri

    @ insanitis37: Alhamdulillah, iya. U/top visitors langsung aja ke e-referrer.com. linkx ada diakhir widgetx

    BalasHapus
  16. Maaaannnttttaaaapppbbbsssszzzz... infonyaa... LANJUUUUTTTT... :X

    BalasHapus
  17. @ salah: MasyaAllah terimakasih apresiasinya.

    BalasHapus
  18. keren sob infonya

    shoumix lagi gangguan ya ?????

    salam www.anjinggoblog.co.cc

    BalasHapus
  19. Mba ok banget tipsnya.....

    3 kolom dibawah header berhasil saya terapkan diblog saya, selain karena iseng saya coba2 tuk membuat hal yang sama pada footer blog saya. Dan walhasil berhasil juga......

    Wah senangnya hati ku....

    BalasHapus
  20. @ Tsagungt: Terimakasih apresiasinya

    @ Mahasiswa...: Hebat, klu mau berhasil mmg harus berani bereksperimen. Padahal ada juga trik khusus menambah elemen halaman diatas footer. Bisa search diblog ini. Terimakasih apresiasinya.

    BalasHapus
  21. tips a ok nich..! bakal dicoba..he
    btw salam jg kenal ya ? n klo da waktu mampir dunk di blog aqu.. aqu dah follow km follow back ya.. pemula ni butuh berbagi
    makasih

    BalasHapus
  22. Keren,sangat bermanfaat Lam kenal

    BalasHapus
  23. bila ada waktu kunjungi http://galihfree4all.blogspot.com/ akan q suguhkan jamuan download an,hahahaha

    BalasHapus
  24. saya kok gak ketemu di blogger baru kode div id='main-wrapper' terus selain kode itu ada gak, masalahnya code kaya gitu di blogger template baru gak ada. maaf ya tanda kurung bukaknya saya hapus biar bisa masuk ke komen

    BalasHapus
  25. terimakasih atas infonya

    salam kenal http://ariajaya80.blogspot.com/

    BalasHapus
  26. assalamu'alaikum.......
    bos, ane pingin bgt bikin "3 kolom" baru'ya itu.
    tp udah ane coba ko' ggl trus y? klo ga numpuk, malah jd "3 baris".
    ane pake "simple template-josh peterson"....
    tag div id='main-wrapper' ga ada

    thank's....

    BalasHapus
  27. Thks atas infonya gan........

    BalasHapus
  28. Trus kalo bikin biar ada backgronnya gimana ukh??

    BalasHapus
  29. @ tinggal nambah kode backgroundnya, sudah pernah ana bahas dipostingan yg lain silahkan cari pada label yg berkaitan/arsip!

    BalasHapus
  30. mantap bos imfonya mampir juga ke blog ane www.andririyantoblog.blogspot.com

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!