Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

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!!!

About Subagya

Hello readers, im Guruh Subagya, i'm start blogging at 2008, i'm person who interest with technology, blogger, and others stuff related to internet marketing. Hope you enjoy with my post information. Happy Blogging
«
Next
Newer Post
»
Previous
Older Post

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. iya bikin ebook aja bener kata indungg

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

    ReplyDelete
  6. 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
  7. makanya aku suka gonta ganti tampilan. ngedit blog tuh mengasyikan lho. pokoknya lupa segala hal deh.

    ReplyDelete
  8. 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
  9. Makin lama makin menarik aja nih tutorialnya :)

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

    ReplyDelete
  11. saya jadi makin paham. ebuk aja oom

    ReplyDelete
  12. 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
  13. wuuihh...rinci bgt neh teorinya kayak rincian hutang aza..hheeee
    ppiiisss...

    ReplyDelete
  14. 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
  15. @ all > untuk ebook ane pertimbangkan, thanks yaks atas komentarnya selama ini.

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

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

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

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

    ReplyDelete
  20. 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
  21. wkewkkekwkekw kereeeen slm ini si baru ngutak ngatik doang belon pernah bikin dari awal...


    chal bikin pdf, jadi ebook aja

    ReplyDelete
  22. 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
  23. Makasih dah bagi2 ilmu, kang.
    Bikin kolom tambahan di template emang bikin mumet loh

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

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

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

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

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

    biasa copy dulu, biar enak prakteknya

    Kok bisa ya..kang Mochal pintar begini

    resepnya apa ya..?

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

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

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

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

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

    ReplyDelete
  34. @ bintang > thinking out of the box

    ReplyDelete
  35. 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
  36. @ cahplesiran > hmmm... pertanyaan di tampung dulu ok sobat

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

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

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

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

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

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

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

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

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

    ReplyDelete
  46. 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
  47. duch 1 ampe 5 malah otak ku nge hang di bozzzz

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

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

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

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

    ReplyDelete
  52. wah artikel ini patut dijadikan rujukan.keren

    ReplyDelete
  53. 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
  54. Untuk wp adakah mas????ijinkan belajar di sni yaa...

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

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

    ReplyDelete


Top