Belajar membuat template sendiri (3)

Setelah bagian 1, dan bagian 2 kita lanjutkan ke bagian 3, dimana bagian ini merupakan bagian inti dalam memodifikasi tampilan template yang sobat buat, pada bagian ini kita fokus ke section 2, yaitu section ini terdapat code css di dalamnya. Saya tidak kasih penjelasan panjang lebar, agar sobat bisa bereksperimen dengan stylenya masing-masing. Hal utama adalah sobat mengenal sedikit kode CSS, seperti width, font, border, background, color, margin dan padding sisanya akan mengikuti seiring dengan berjalannya usaha sobat dalam belajar membuat template.
Penasaran gak sih?


Pada bagian ini saya mencoba merangkum hasil dari bereksperimen dan melihat pola struktur template terutama di section 2. Pola penulisan kode pada bagian section 2 ini adalah seperti ini :

selector{property:value}

Ket :
- selector = merupakan pembentuk suatu elemen HTML
-{ } = sebagai tag penutup dari property dan value
- property = memberikan suatu atribute untuk merubah selector
- value = memberikan nilai untuk property

contoh =

body (background:#000000)

artinya : untuk element body - (definisi body saya sudah jelakan di bagian 1-red) mempunyai background (latar belakang) berwarna hitam (#000000) ini semua berlaku global atau keseluruhan.

Bagaimana menyatakan untuk setiap element yang berbeda?
Nah, di sini diperlukan untuk id selector dan class selector
- untuk id selector dimulai dengan tanda # (slash)
- untuk class selector di mulai dengan tanda . (dot)
Contoh :

#sidebar-wrapper (width: 350px;background-color:#00000)

artinya : element id sidebar mempunyai panjang 350px dan backgroundnya warna hitam. Nilai ini berlaku hanya untuk element id sidebar

Sekarang untuk class selector adalah di mana satu element bisa di style berbeda-beda.
Contoh :

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar ol {
list-style-type: decimal;
margin:0 0 0 25px;
padding:0 0 0 0;
}


Pada intinya di bagian 3 ini adalah sobat bisa menambahkan selector serta merubah property dan value dari masing-masing container/tag.
Sekarang masuk ke bagian masing-masing container :

Header:

* #header-wrapper - container yang berisi title blog dan descriptionnya.
* #header - container yang berada dalam header-wrapper.
* #header h1 - mengkontrol container header dan memberikan nilai dari tampilan title blog
* #header h1 a - mengkontrol nilai title blog ketika sebagai link teks
* #header .description - memberikan properties untuk description blog
* #header a img - mengkontrol properties image (gambar) di dalam container

Main:

* #main-wrapper - container yang berisi umumnya : post, comments, date header, dan widget yang berada di dalamnya
* #main - container yang berada dalam main wrapper
* h2.date-header - mengatur nilai untuk tanggal postingan
* .post - mengatur nilai untuk postingan
* .post h3 - mengatur nilai judul postingan
* .post-body p - mengatur isi content di post
* .post ul - menagatur nilai unordered list (daftar yang tidak ada bernomor)
* .post ol - mengatur nilai ordered list (daftar yang bernomor).
* .post li - mengatur nilai daftar tersendiri dari unordered list atau ordered list.

Sidebar :
* #sidebar-wrapper - container yang berisi umumnya sidebar (memblock)
* .sidebar h2 - mengatur propeties title sidebar
* .sidebar .widget - mengatur properties dari widget sidebar
* .sidebar ul - mengatur nilai dari unordered list

Comments :
* #comments - mengatur container comments
* #comments a - mengatur nilai link teks di dalam container comments
* #comments h4 - mengatur nilai title header comments
* #comments ul - mengatur nilai dari unordered list yang berada dalam comment container.
* .comment-author - mengatur nilai comments author
* .comment-body p - mengatur nilai body isi komentar
* .deleted-comment - mengatur nilai ketika delete comments
Footer :

* #footer-wrapper - mengatur element footer container
* #footer - container yang berada dalam footer-wrapper.
* #footer h2 - mengatur properties dari footer title/header.
* #footer .widget - mengatur footer widget properties.
* .footer a - mengatur nilai link teks di footes
* .footer ul - mengatur nilai dari unordered list yang berada dalam footer

Pyuuh, akhir selesai juga bagian 3, perlu di sampaikan pembagian kontainer ini belum semuanya lengkap tergantung keinginan sobat dalam menambahkan style dalam template, untuk menambah variasi silahkan sobat melihat kode template dari template yang beredar bebas :) di internet (gratisan-red).Ok, sobat happy blogging :p
NB : untuk belajar CSS silahkan klik di sini!!
Untuk para suhu-suhu mohon koreksinya yaks :D :
- Kang Jaloee
- Kang Rohman
- Kang Herro
dan suhu-suhu lainnya.

post signature

42 comments:

  1. PT PETROOOKIMIAXXX Gresik...
    Jualan pupuk maksudnya...

    ReplyDelete
  2. Weeee... mantep om tutornya..
    Versi E-booknya kapan nih dilauncing...


    *padahal ndak ngerti blas.../kringet

    ReplyDelete
  3. @qittun > weeks mulai stigma baru neeeh ptrokimiaaax wekekekekekk /lari

    ReplyDelete
  4. Olie...........xxxsss
    Suhu,mochal berikan aku privat soal belajar membuat templat dong,...
    Sampe pelajaran ke 3 ini aku masih bingung,..
    Suhu,mochal.....beri aku ilmu mu,..
    Turunkan ilmu yg kau punya hanya untuk ku,...
    Terimalah prmohonanku ini,suhu!
    Di puncak nch?/

    ReplyDelete
  5. Yup... kalo lah bikin template yang suip... bisa numpang pake nich. Soale ane nggak ngerti CSS-an sih. Keep writing and happy bloging

    ReplyDelete
  6. seeep seep..krasan neh sayah disinig /baca/baca/baca/baca

    ReplyDelete
  7. duhh... Chal sebenernya pengin bikin templet sendiri dari kemarin dah aku ikutin simpen di bookmarks tp yaaa... lagi ga jelas nih otakku... jadi ruwet mau mikir /jedug

    ReplyDelete
  8. mending aku baca dulu deh.. kalo dah good mood baru buat tp jgn lupa ajarin aku yaa... tp mesti sabar aku kan oon soal html yang ngajarin aku aja sering marah dan kesal krn aku gak mudeng2 /hiks/hiks

    ReplyDelete
  9. /bisk jadi tertarik menganti them lagi nih gw. ngunci rumah dulu ah... ?lari /jedug /hihi aku ketabrak pintu widget /hehe

    ReplyDelete
  10. Gimana ya caranya biar pinter kayang kang mochal???

    ReplyDelete
  11. /hore HEBAT-HEBAT...semua ilmu mas mochal dimuntahkan.. Asyyikkk aku tinggal jilat.../kringet muntahnya org cakep ternyata banyak memberikan manfaat /bisik aku jd ketagihan nih..

    ReplyDelete
  12. bisa ajarin saya bikin template nggak mas ?? artikelnya tutorial banget ... salam kenal.. VEI

    ReplyDelete
  13. sip kang..saya mau save page aja nie skg..udah mule pelajaran nyang krusial..wekekek..

    semangat challl../hore

    ReplyDelete
  14. chaaaaaaaaaaaaaaaaaaaaaaal
    yuuuk beli petromaxxx

    hemmm...uda ganteng pinter lagi
    ck ck ck bunyi ujan
    wkkekwkekkw
    chal bikin pdf aja...jd ebook

    ReplyDelete
  15. yes sip kalau ngomongin selector seperti suhu bilang ini intinya

    id selector dan class selector
    - untuk id selector dimulai dengan tanda # (slash)
    - untuk class selector di mulai dengan tanda . (dot)

    wah..wah.. tambah dalem saja tulisannya kang

    ReplyDelete
  16. Mantap tutorialnya. Gaya bahasanya makin keren nih. Mungkin lebih baik kalo dibahas lagi perbagian secara komplit. seperti bagian header, jadinya satu postingan full bahas header aja. biar ga bingung. tapi /bom, ms ane dibilang suhu? yang bener aja tuh. /lari

    ReplyDelete
  17. /kringet duhhhh susahhhhhhhhhhhhhhhh

    ReplyDelete
  18. Tinggal di praktekin nih, thanks tutorialnya kang. eh.. tapi ngomong2 kayaknya bagus nih kang kalau dibuat dalam bentuk pdf.

    ReplyDelete
  19. Wah pak insinyur dari buku jilid 1-3 dan ditambah ilmu2 yg lain kok aku masih belum ngerti yah...gini aja kang, makannya apa sih biar aku ikutin biar cepet pinter...hehehe, btw top pisan kang....mantafff

    ReplyDelete
  20. masi blajar kalo bwt nempatin/posisinya, kl size ud mudeng...yuuuk baca lagi /baca

    ReplyDelete
  21. oke banget sih bikin template sendiri..
    aku sih jauh dari bisa... malah bingung..
    tapi artikelnya useful banget kalo mau buat ubah2 template yg ada..
    siip siipp...

    ReplyDelete
  22. wah wah ternyata agak susah juga ya buat template sendiri... pingin bisa padahal aku..

    ReplyDelete
  23. Blogwalking Sambil Nyari Kenalan
    Salam duitptc.info

    ReplyDelete
  24. whew, mantap neh suhu
    newbie numpang belajar yak :kk:

    ReplyDelete
  25. coba lagiiiiii......./jedug
    mpe khatam ni template,
    tapi emang puasnya bisa customisasi template sendiri.

    regards,
    MyAvatarInside
    http://3dsmaxsupport.blogspot.com/

    ReplyDelete
  26. postingnya memberikan pencerahan sekali.. apalagi dengan bahasa yang mudah dicerna...

    ReplyDelete
  27. wekekekekekeke... jajal template neo wekekekek...

    ReplyDelete
  28. wah tampilan baru kang, tambah keren aja.:)
    kayanya lagi musim nich.. hehehe

    ReplyDelete
  29. kreeennn bkin tmplate ndiri.. seepp!!

    ReplyDelete
  30. oo ini yak chal maksodnya nyang kemaren?
    nyang next page
    bagus siy
    tapi
    waaaaaaaaaaaaaa
    msuti edit dr awal

    ReplyDelete
  31. @ cebong > ho oh nyang kemaren ...

    ReplyDelete
  32. wow... keren layoutnya sekarang. mantab :)

    Panda sakuin dulu ah...

    ReplyDelete
  33. @ panda > sakuin apa nigh bro wekekekkekeke...

    ReplyDelete
  34. penasaran tapi ini kolom komentarnya udah ada, isi dulu deh :)

    ReplyDelete
  35. setelah baca ternyata ini toh master template blogger itu, perlu belajar saya bikin template, masih modiv yg udah ada terus, hehe

    ReplyDelete
  36. Tambah asyik nich dach nyampe pelajaran ke 3

    ReplyDelete
  37. kang punten saya copypaste yah...soalnya mo belajar secara offline dulu...ntar kalo dah bisa mo nyoba lagi...persis tadi yg dibilang mesti mau try en error..nuhun

    ReplyDelete
  38. @ yulia > silahkan kita sama-sama belajar ko mba. and tutor ini sebenarnya masih bvanyak kekuranngannya mba.. saya hanya menggambarkan scara dasar, pengembangan ada pada diri kita mba.. kalau sudah paham pasti kita bisa... salam kenal

    ReplyDelete
  39. bos aku save as ya,, buat belajar offline, thanks

    ReplyDelete
  40. alhamdulillah...terbantu dengan tulisan ini. bagi pemula dan tukang ngotak-ngatik gak bisa benerin kayak ane bikin penasaran pengen nyoba'in deh!/nglirik bag.4 seeep!!! thank u ^_^

    ReplyDelete
  41. Wah Keren mas tapi saya mau nanya neh cara memposting tenplate tuh di blog gimana mas (bukan cara nulis kode html)
    THx mas jika berkenan memberikan jawaban :)

    ReplyDelete