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

41 comments:

Cebong IpietOctober 14, 2008 at 12:15 AM
weeeeeeeeeeeeeeeeeeeeeeeee
setuju ama yg paling bawah
trial and error
wekkwekwkek
makasiy y ikan lele
SubagyaOctober 14, 2008 at 12:50 AM
@ cebong > thats right bong /lari
AnonymousOctober 14, 2008 at 1:21 AM
wah...kang aku gag ngerti nih...hehehehehe, maunya sih dibuatin aja.....hehehehehe oh iya makasih yah kulit barunya
AnaskuOctober 14, 2008 at 1:36 AM
cihuyy... makin top deh.. ni si abang
internet and securityOctober 14, 2008 at 6:06 AM
/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/
AnonymousOctober 14, 2008 at 6:37 AM
Pokona Aku minta di buatin Template yg keren, TOP,..enteeng,...
Tak tunggu Minggu ini sudah hars kelar,..
Awas kalo sampe ga rampung minggu ini...
Cebong IpietOctober 14, 2008 at 7:42 AM
yay...ikan lele dipanggil guru...
/hihi
Oyi chal..tulung PR yg saya tanyaken kemaren malem yak
wajib ituh
kalo nggak /licik
AnonymousOctober 14, 2008 at 10:31 AM
Tutorialnya mantep ... tapi aku kagak ngerti sama sekali ... apa penulisnya udah muaster bangetss ... atau aku nya yang oon ya ???
AnonymousOctober 14, 2008 at 11:59 AM
wekekekeke....sesuai ama judulnya. "Membuat template sendiri" nyang artinya tetep aja mikir sendiri.

Kabur... /lari
AnonymousOctober 14, 2008 at 12:00 PM
saya sangat paham betul masalah utak-atik template.../bom
apalagi kalo bikin error template yang udah jadi.../duer
AnonymousOctober 14, 2008 at 3:39 PM
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
AnonymousOctober 14, 2008 at 9:42 PM
mo komentar malah yang punya blo kabur..ikutan ngacir...he2
JaloeeOctober 14, 2008 at 10:01 PM
wah pd rajin amat update yach /clinguk2 .. yg ane malah blog na lagi down neh .. hmmmm meningan /lari
AnonymousOctober 15, 2008 at 12:53 AM
Di Bookmark aja deh, belajarnya pelan-pelan biar gak banyak error
Kristina Dian SafitryOctober 15, 2008 at 8:04 AM
sip.masukan yang sangat berarti nih buat aku yg lagi belajar bikin them
Umi FaridaOctober 15, 2008 at 9:40 AM
Penginnya bisa, tapi kok agaknya susah ya,,,
AnangOctober 15, 2008 at 11:16 AM
ini juga langkah yang saya pakai untuk mengedit template saya.... thanks mas
JoVieOctober 15, 2008 at 5:40 PM
Makasih Friend....
nice post....
Keep Posting yah...
AnonymousOctober 16, 2008 at 4:07 AM
waduh, ga masuk kelas kuliahnya Kang Bagya 3 hari ajah dah banyak ketinggalan neh....minjem catetan sapa ya ? biar bisa dibaca drmh..heheh
anita muiOctober 16, 2008 at 4:59 AM
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
anita muiOctober 16, 2008 at 5:04 AM
/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
AnonymousOctober 16, 2008 at 3:26 PM
/baca

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

nice post
AnonymousOctober 16, 2008 at 3:38 PM
The paank Return

Haduuuh, kayaknya aq dah ketinggalan berita banyak bangets

/hiks
AnonymousOctober 16, 2008 at 5:37 PM
thank kang infonya, jd tambah paham nie mengenai kode CSS.
inicumaOctober 16, 2008 at 10:44 PM
sip kang mochal, dan yang kebanyakan error pada section 3 /jedug
tunggu lanjutannya ah
The DiaryOctober 17, 2008 at 10:12 AM
masih ada berapa lagi lanjutannya??? hehehe
AnonymousOctober 17, 2008 at 10:25 AM
@To all > sorry bbrp hr ini saya sibuk dgn pekerjaan, Insya Allah pertanyaan2nya sy tampung , thanks all sobat.. Best regards mochal
AnonymousOctober 17, 2008 at 11:02 AM
makasih broth, terus berkarya yah...
AnonymousOctober 17, 2008 at 5:09 PM
/clinguk2, kang mochal ilang kemana ya?
AnonymousOctober 17, 2008 at 5:36 PM
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
AnonymousOctober 17, 2008 at 10:02 PM
Bingung nie..
Tetep gak ngerti ama kode-kodean..
Buatin saya template ya kang..

*Berharap*
AnonymousOctober 18, 2008 at 7:55 AM
wah. keren nih keren !!!
Diana YusufOctober 18, 2008 at 12:15 PM
Wah, susah kang, aku ga isa ngoprek html, jadi nanti kalo mau minta apa2 aku kesini aja ya
Baka KelanaOctober 23, 2008 at 5:22 PM
Perlu waktu yang pas untuk memahami ini semua

yang copy dulu

thanks ya Bos
yulia madjidOctober 23, 2008 at 11:36 PM
kang kalo sudah bikin section 1 sampe 3 trus kalo mau ngetest gimana. maxudnya tanpa harus buka web ..eh namanya homesite yah..
SubagyaOctober 23, 2008 at 11:42 PM
@ yulia > ya harus online mba.. biar tahu kesalahannya di mana.. kan prinsipnya trial and error wekekekekke
AnonymousDecember 27, 2008 at 7:53 PM
kucoba buat ah....
biar gak nyari gratisan template ja.....

http://ym-tutorial.blogspot.com
AnonymousFebruary 10, 2009 at 9:42 AM
Baru bagian 2 dulu, bagian 3 nya tar malem hi..hi..
Cerita Hari FebriMay 20, 2009 at 10:22 AM
Terima kasih banget infonya yaaa
astaga.com lifestyle on the netDecember 13, 2009 at 8:29 AM
Wah oke nih tipsnya.. ku juga ingin buat template... hehehe
sinjay schoolFebruary 25, 2010 at 12:37 AM
thanks ilmunya