Belajar membuat template sendiri (2)

Yups setelah bagian pertama, sekarang masuk ke bagian kedua, bagian ini hanya saya sedikit ulas bagian struktur template dari bahasa pemograman atau kalau sobat masuk bagian Edit HTML di sanalah biasanya kode ini dapat dilihat, dan lagi-lagi saya contohkan dengan template minima , template yang menurut saya merupakan template yang mudah di pahami bagian-bagiannya.
Mau baca lagikan?


Sebenarnya hampir sama semua template di bagi menurut pembagian ini, dan menurut pengataman saya bagian tersebut di bagi menjadi 3 section.

Bagian-bagian tersebut :
Section 1.

Merupakan keterangan kode pengenalan template dan berisi
informasi-informasi di dalamnya, biasanya peletakan metatag di taruh di bagian ini.

Umumnya di bagian section 1 :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr: dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns: data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>


Section 2

Bagian ini menyimpan kode CSS untuk membentuk keindahan blog, bagian ini bisa kita modifikasi dan kita tambahkan. Pada bagian ini perlu pemahaman tentang CSS, yang ga perlu jago asal tahu perbedaan margin dan padding aja juga cukup :p , tetapi sobat secara dasar harus paham dengan kode CSS yg sederhana saja.

Umumnya section 2 bentuk kodenya seperti ini :

<b:skin><![CDATA[/*
body {...}
#header-wrapper {...}
#header-inner {...}
#header {....}
#outer-wrapper {....}
#main-wrapper {....}
#sidebar-wrapper {...}
h2 {...}
h2.date-header {
margin:1.5em 0 .5em;
}
.post {..... }
#comments h4 {....}
.sidebar {....}
#footer {.....}
]]></b:skin>

Perhatikan perbedaannya dengan section 1 dan section 3.

Section 3

Pada bagian ini biasanya untuk memanggil data-data pada blog kita, seperti isi postingan, komentar, serta juga menentukan yang mana akan mau di tampilkan lebih dahulu seperti urutan yang standar dulu biasanya dimulai dari header, main, sidebar, dan footer kemudian bagian ini di percantik oleh section 2 (kontrol CSS) sehingga menampilkan tampilan yang unik atau serasi pada browser.

Umumnya kode section 3 seperti ini :

</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Just Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>

Pahami setiap section, umumnya untuk mempercantik biasanya pada section 2 dan sedikit pada section 3.

Semuanya menjadi satu kesatuan dan menghasilkan template yang anda bisa lihat, yang perlu ditekankan adalah keahliah sobat dalam memahami struktur dari template dan sedikit keahlian bahasa CSS, tidak yang perlu menjelimet yang penting pemahaman dan semangatuntuk belajar. Pake prinsip Try and Error , coba dan lihat hasilnya!!! Kalau gagal yakasihaaan deh lu wekekekekek /kabur

post signature

41 comments:

  1. weeeeeeeeeeeeeeeeeeeeeeeee
    setuju ama yg paling bawah
    trial and error
    wekkwekwkek
    makasiy y ikan lele

    ReplyDelete
  2. @ cebong > thats right bong /lari

    ReplyDelete
  3. wah...kang aku gag ngerti nih...hehehehehe, maunya sih dibuatin aja.....hehehehehe oh iya makasih yah kulit barunya

    ReplyDelete
  4. cihuyy... makin top deh.. ni si abang

    ReplyDelete
  5. /duer sepertinya saya harus banyak belajar tentang template di blog ini,salam kenal guru.

    oh iya giru dah saya link,link balik ya guru,sukses

    /larikabur....

    http://myinternetsecurity.blogspot.com/

    ReplyDelete
  6. Pokona Aku minta di buatin Template yg keren, TOP,..enteeng,...
    Tak tunggu Minggu ini sudah hars kelar,..
    Awas kalo sampe ga rampung minggu ini...

    ReplyDelete
  7. yay...ikan lele dipanggil guru...
    /hihi
    Oyi chal..tulung PR yg saya tanyaken kemaren malem yak
    wajib ituh
    kalo nggak /licik

    ReplyDelete
  8. Tutorialnya mantep ... tapi aku kagak ngerti sama sekali ... apa penulisnya udah muaster bangetss ... atau aku nya yang oon ya ???

    ReplyDelete
  9. wekekekeke....sesuai ama judulnya. "Membuat template sendiri" nyang artinya tetep aja mikir sendiri.

    Kabur... /lari

    ReplyDelete
  10. saya sangat paham betul masalah utak-atik template.../bom
    apalagi kalo bikin error template yang udah jadi.../duer

    ReplyDelete
  11. klo dari WP bisa konpetin punya ane ga boss../hehe ada templit bagus..tp ga ngerti nie..wekekek/hore

    kali aja mau dikompetin ama mochal.../lari

    ReplyDelete
  12. mo komentar malah yang punya blo kabur..ikutan ngacir...he2

    ReplyDelete
  13. wah pd rajin amat update yach /clinguk2 .. yg ane malah blog na lagi down neh .. hmmmm meningan /lari

    ReplyDelete
  14. Di Bookmark aja deh, belajarnya pelan-pelan biar gak banyak error

    ReplyDelete
  15. sip.masukan yang sangat berarti nih buat aku yg lagi belajar bikin them

    ReplyDelete
  16. Penginnya bisa, tapi kok agaknya susah ya,,,

    ReplyDelete
  17. ini juga langkah yang saya pakai untuk mengedit template saya.... thanks mas

    ReplyDelete
  18. Makasih Friend....
    nice post....
    Keep Posting yah...

    ReplyDelete
  19. waduh, ga masuk kelas kuliahnya Kang Bagya 3 hari ajah dah banyak ketinggalan neh....minjem catetan sapa ya ? biar bisa dibaca drmh..heheh

    ReplyDelete
  20. Mas../bisik..ntar klo templateku jadi error aku serang km ya,soalnya msih sedikit paham ccs.klo try and error kayaknya lebih dominan errornya dech.../hehe

    ReplyDelete
  21. /hm..MAS MOCHAL ini kok cerdas bgt sihh../bisik makan apa sih mas kok bisa pinter.../bom apa menunya ada di dlm cini???hhee/lari

    ReplyDelete
  22. /baca

    aq langsung bingung kalo urusannya ma kode-kode JS/CSS.

    nice post

    ReplyDelete
  23. The paank Return

    Haduuuh, kayaknya aq dah ketinggalan berita banyak bangets

    /hiks

    ReplyDelete
  24. thank kang infonya, jd tambah paham nie mengenai kode CSS.

    ReplyDelete
  25. sip kang mochal, dan yang kebanyakan error pada section 3 /jedug
    tunggu lanjutannya ah

    ReplyDelete
  26. masih ada berapa lagi lanjutannya??? hehehe

    ReplyDelete
  27. @To all > sorry bbrp hr ini saya sibuk dgn pekerjaan, Insya Allah pertanyaan2nya sy tampung , thanks all sobat.. Best regards mochal

    ReplyDelete
  28. makasih broth, terus berkarya yah...

    ReplyDelete
  29. /clinguk2, kang mochal ilang kemana ya?

    ReplyDelete
  30. blog yang bagus mas, saya yakin suatu saat nanti blog ini menjadi blog yang besar seperti blog lain yang sudah duluan terkenal.

    http://in-rich.blogspot.com

    ReplyDelete
  31. Bingung nie..
    Tetep gak ngerti ama kode-kodean..
    Buatin saya template ya kang..

    *Berharap*

    ReplyDelete
  32. wah. keren nih keren !!!

    ReplyDelete
  33. Wah, susah kang, aku ga isa ngoprek html, jadi nanti kalo mau minta apa2 aku kesini aja ya

    ReplyDelete
  34. Perlu waktu yang pas untuk memahami ini semua

    yang copy dulu

    thanks ya Bos

    ReplyDelete
  35. kang kalo sudah bikin section 1 sampe 3 trus kalo mau ngetest gimana. maxudnya tanpa harus buka web ..eh namanya homesite yah..

    ReplyDelete
  36. @ yulia > ya harus online mba.. biar tahu kesalahannya di mana.. kan prinsipnya trial and error wekekekekke

    ReplyDelete
  37. kucoba buat ah....
    biar gak nyari gratisan template ja.....

    http://ym-tutorial.blogspot.com

    ReplyDelete
  38. Baru bagian 2 dulu, bagian 3 nya tar malem hi..hi..

    ReplyDelete
  39. Wah oke nih tipsnya.. ku juga ingin buat template... hehehe

    ReplyDelete