Belajar membuat template sendiri (5)

Kalau sobat sudah membaca bagian 1, bagian 2, bagian 3, bagian 4 dan sudah memahaminya, pasti bagian ini menjadi bagian yang menyenangkan, yaitu bagian membuat kolom baru. Pada dasarnya banyak cara atau teknik untuk membuat kolom baru ini, saya kasih salah satu contoh yang biasa saya gunakan dalam membuat template kolom baru.

Hal pertama yang dilakukan adalah melihat ukuran atau width dari template yang sobat akan buat, jika ingin menambahkan kolom baru maka ukuran widhtnya di sesuaikan., biasanya ukuran outer-wraper yang di rubah kemudian main-wrapper, dan sidebar-wrapper, serta footer-wrapper. Saya kasih contoh dengan menggunakan code template minima :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}

Dapat dilihat pada code tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.
Tampilan layout :

 
 Nah, sekarang kita ingin membuat kolom baru sidebar jadi 2 kolom di bawah kolom sidebar utama, atau lihat contohnya seperti ini :
  
 Yang perlu di lakukan adalah merubah width outer-wrapper, main-wrapper, dan biasanya untuk width header-wrapper serta footer-wrapper mengikuti ukuran width outer wrapper, kalau sobat sudah paham di bagian 3, dan bagian 4 tentu sangat mudah membuat layout seperti contoh gambar di atas. Jika sobat sudah merubah outer-wrappernya dengan yang di kehendaki, tinggal membagi sisanya untuk main-wrapper dan sidebar-wrapper saya kasih contoh dengan mengubah outer-wrapper : 920px, main-wrapper: 500px, dan sidebar-wraaper: 400px, nah sekarang bagaimana memunculkan 2 kolom sidebar di bawah sidebar utama?
Konsep dasar bagi sobat yang serius ingin belajar membuat template sendiri yatu sobat akan banyak mengubah kode di section 2 ( bagian CSS) dan section 3 (bagian HTML), kalau sobat sudah mengubah ukuran-ukuran di atas, tinggal menambahkan kode di bawah ini di section 2 :

#left-sidebar-wrapper {
  width: 180px;
  float: left;
  text-align: justified;
  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 */
}
#right-sidebar-wrapper {
  width: 180px;
  float: right;
  text-align: justified;
  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 */
}
Kode di atas untuk membentuk container baru yang namanya left-sidebar-wrapper dan right-sidebar-wrapper, nah sekarang kita ke bagian section 3 yaitu untuk memunculkan container baru ini di browser harus perlu di tulis di section 3 yaitu di bagian  <div id='sidebar-wrapper'> perhatikan tag penutupnya dan section classnya atau simple kodenya adalah seperti ini :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Masukkan kode ini di dalam container sidebar :


<div id='left-sidebar-wrapper'>
      <b:section class='sidebar' id='leftsidebar'>
</b:section>
    </div>
<div id='right-sidebar-wrapper'>
      <b:section class='sidebar' id='rightsidebar'>
</b:section>
    </div>

Sehingga kodenya akan seperti ini jika di masukkan ke dalam container sidebar :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
<div id='left-sidebar-wrapper'>
      <b:section class='sidebar' id='leftsidebar'>
</b:section>
    </div>
<div id='right-sidebar-wrapper'>
      <b:section class='sidebar' id='rightsidebar'>
</b:section>
    </div>
</div>


Perhatikan masing section classnya semuanya sidebar, yang berarti tamplilan maupun widget yang di dalam container baru tersebut mengkuti aturan class sidebar yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .left-sidebar {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='left-sidebar' id='leftsidebar'> 
Kalau sobat pahami tutorial ini dari bagian 1 sampai 4 tentunya bagian ini merupakan bagian yang tidak membingungkan.  Semoga ilmu ini bermanfaat buat sobat blogger yang ingin merancang template sendiri. Ok sobat  selamat mengikuti dan pahami dengan seksama, jangan terburu-buru membacanya. Semoga berhasil!!!

63 comments:

  1. saya masih setia menunggu bagian selanjutnya .

    ReplyDelete
  2. Wah serial ini mending dibikin ebook aja boz. Biar bisa kita dunlud untuk bacaan ofline. Sip ka?

    ReplyDelete
  3. bro,...aku m tepuk tangan dulu yach,...
    plok,....plok,....plok,...
    Kok lo makin pinter sech,..
    buat templet jago,..kasih tutorial jago,..
    Wah,.aku makin Ci**a sama kamu,...
    eh,sama bl;og ini....

    ReplyDelete
  4. E-book,..setuju ajah bro!

    ReplyDelete
  5. iya bikin ebook aja bener kata indungg

    ReplyDelete
  6. setujukkk bikin ebook-nya.. yg donlot harus langgan via feed..hihihiih

    ReplyDelete
  7. iyo challll, setuju saya sama kang jaloe tuh..compile semuanya di ebook..pasti byk yang subscribe tuhhhh buat belajar bikin templit..

    mantap suhuuuu ilmu tutorialnya..iya neh pelajaran ini paling menyenangkan buat nambahin yg lainnya...

    T-O-P :)

    ReplyDelete
  8. makanya aku suka gonta ganti tampilan. ngedit blog tuh mengasyikan lho. pokoknya lupa segala hal deh.

    ReplyDelete
  9. pertama

    mau sampai angka berapa sobat...!

    kedua

    bagus neh sobat.. tapi untuk optimalkan di goole.. seharusnya ada judul.. menambah.. dua kolom di sidebar atau apa gitu...

    ketiga

    bagus neh cara penyampainya...

    keempat

    ntar kalau sudah selesai.. buat di PDF jadiin ebook dan promosikan di blog.

    kelima

    terima kasihh sobat...

    ReplyDelete
  10. Makin lama makin menarik aja nih tutorialnya :)

    ReplyDelete
  11. wah kang komandan mochal, sudah memerikan ilmu membuat templatenya maka aku akan mencoba dari pelajaran 1 sampai dengan 5. makasih yah kang mochal....

    ReplyDelete
  12. saya jadi makin paham. ebuk aja oom

    ReplyDelete
  13. Tiap kali keluar edisi membuat templatenya, jd makin yakin kl mau bilang bahwa

    "TUTORIALNYA MAKIN KEREN NIH"

    Cuma satu yang ane sayangin boz, judulnya terlalu umum sehingga klh ama blog lain digugle. kl aja bs ditop list gugle, trus bikin ebooknya, ga kebayang berapa banyak yang akan langganan via feed(sambil ngebayangin nih).

    ditunggu karya selanjutnya.....

    ReplyDelete
  14. wuuihh...rinci bgt neh teorinya kayak rincian hutang aza..hheeee
    ppiiisss...

    ReplyDelete
  15. wah
    ini perlu buat saya nih
    soalnya saya rada-rada kurang ngarti ttg script2
    wah saya dukung usul rekans lain bikin e book
    ntar taruh di ziddu kan lumayan
    mas

    ReplyDelete
  16. @ all > untuk ebook ane pertimbangkan, thanks yaks atas komentarnya selama ini.

    ReplyDelete
  17. ini dia bagian yang aku tunggu modikasi sidebar, iya bro buat ebook aja biar lebih siip

    ReplyDelete
  18. @ herro > ya gimanya bro.... ajarin donk SEO nya wekekekekk

    ReplyDelete
  19. aku ikutan donk belajar membuat templateny, abis gagal terus kl mo buat..ga tau juga caranya...ajarin yach bro

    ReplyDelete
  20. Sip, bentar lagi bakal bisa buat template sendiri nih :)

    ReplyDelete
  21. wah..udah seri 5 yah....belom baca seri 1,2,3,dan 4....
    4 sehat, 5 sempurna nih?? ada yang ke 6 gak??
    *sorry commentnya gk nyambung....yang penting udah mampu mengobati rindumu pada ku kan??* hihikz...

    ReplyDelete
  22. wkewkkekwkekw kereeeen slm ini si baru ngutak ngatik doang belon pernah bikin dari awal...


    chal bikin pdf, jadi ebook aja

    ReplyDelete
  23. Lha ini, orang2 kreatif ini yang banyak dicari, g cuman pake template yang udah jadi tanpa mau pusing (kayak saya he..he..). Hebat Mas, kalau ada waktu pingin juga sih nyobain ilmunya buat bikin template sendiri, di hati rasanya lebih puas. Salam.

    ReplyDelete
  24. Makasih dah bagi2 ilmu, kang.
    Bikin kolom tambahan di template emang bikin mumet loh

    ReplyDelete
  25. @ seno > thanks bro
    @ cebong > ebook apa ebong wekekekekeke

    ReplyDelete
  26. nambah satu lagi, bookmark lg boss. thenkyu :)

    ReplyDelete
  27. waah jadi pengen langsung prakte neeh,...

    ReplyDelete
  28. bagus banget tutornya dech, info berharga buat saya

    ReplyDelete
  29. Alamak..seri ke 5 nya dach keluar

    biasa copy dulu, biar enak prakteknya

    Kok bisa ya..kang Mochal pintar begini

    resepnya apa ya..?

    ReplyDelete
  30. weh2 makin mantep aja,
    ini yg saya cari2 kang, nambahin kolom di template
    thanks for sharing

    ReplyDelete
  31. ini lum kemampuan ane bro..., masih jauh ....

    ReplyDelete
  32. Dicoba dulu ya,Kang...dari dulu pengen bisa bikin template sendiri :)

    ReplyDelete
  33. keren tutorialnya.mohon ijin disave dulu y om

    ReplyDelete
  34. wah ini baru tutorial yg maknyuus..he..he

    ReplyDelete
  35. @ bintang > thinking out of the box

    ReplyDelete
  36. numpang nanya suhu,
    gambar di header blog saya kok kadang ga bisa pas ukurannya ya.. kalau di monitor sedang udah pas, nah begitu dibuka di monitor yg lbh lebar, gambar headernya ga bisa penuh. gimana ya suhu??

    ReplyDelete
  37. @ cahplesiran > hmmm... pertanyaan di tampung dulu ok sobat

    ReplyDelete
  38. udah pada liat template ku yg 4 kolom blom....

    ReplyDelete
  39. @ 3d > mana bro? ada linknya kah, ane sebenarnya juga pyunya koleksi 4 kolom

    ReplyDelete
  40. lihat di profil gw yg ini...ente liat posisi ads gw keren gak?

    ReplyDelete
  41. @ 3d > kereeen bro.... gaya vista mantab... hehehehehe... loadingnya juga ga berat.. btw mang ga da shoutmix yak?

    ReplyDelete
  42. setuju, mendingan serial ini dan cara membuat template dari awal sampe akhir di jadikan ebook.. tapi yang gratis.. hehehe

    ReplyDelete
  43. Sanat mmebatu artikelnya mas..... Thx bgt zaa.......

    ReplyDelete
  44. kng, bsa minta trik buat bikin 3 colom di footer.

    ReplyDelete
  45. @ goza > silahkan ke sini mas alamat ini http://subagya.blogspot.com/2008/07/membuat-3-kolom-di-footer-secthion_23.html

    ReplyDelete
  46. terima kasih, ini dia yang di tunggu-tunggu

    ReplyDelete
  47. Mmmmh keren abizzz.. makasih ya,saran gw jgn pelit ilmu,biar bangsa ini gak pd memble mua nya contoh ny gw nih ,jd agak nge n tertarik soal ngeblog akibat mbaca,artikel ANAS,O-OOM and kamiu dunk tentunya.. THANK'S

    ReplyDelete
  48. duch 1 ampe 5 malah otak ku nge hang di bozzzz

    ReplyDelete
  49. Ajib,manteb bener Sob postingannya ! Ane mesti berguru ma ente nie ! btw,salam knal dah !

    ReplyDelete
  50. ini yang saya cari-cari, trima kasih banyak.
    salam kenal

    ReplyDelete
  51. weis...mantab banget nih tutorial! keren! penjelasan nya mantab

    ReplyDelete
  52. wah ini nih artikel yang saya butuhkan! thanks a lot

    ReplyDelete
  53. wah artikel ini patut dijadikan rujukan.keren

    ReplyDelete
  54. Mas hebat banget !!!top!!! saya belajar buat template tapi ga bisa bisa ampe skarang...ga ngerti cara slice (untuk wp)..apalagi blogspot...haduufhh nyraaaah saya..

    ReplyDelete
  55. Untuk wp adakah mas????ijinkan belajar di sni yaa...

    ReplyDelete
  56. wah setelah aku pelajari aku makin mengerti mas...bahwa aku ndak bisa buat theme sendiri huaaa nangisss...

    ReplyDelete
  57. rasanya saya di ajarkan untuk harus mandiri, thanks

    ReplyDelete