Belajar desain layout template bag.2

Pada bagian sebelumnya kita sudah mengetahui struktur layout template dan pembagian-bagiannya, sekarang kita masuk ke bagian yang terpenting yaitu mengenal struktur kode pada template dan kalau memang sobat blogger ingin bisa bagaimana cara membuat template sendiri ataupun hanya sekadar modifikasi pada pembahasa ini harus di baca dengan penuh konsetrasi tinggi :p, karena memang banyak kode-kode yang menjlimet pada pemabahasan ini.
Pada umumnya kode template default blogger mempunyai bagian-bagian seperti di bawah ini :
Karena terlalu panjang kodenya untuk di paparkan di post silahkan download di sini (tenang aja bukan ziddu kok :p)
Saya sarankan sobat untuk mendownload karena bila tidak pembahasan di bawah ini akan membuat bingung sobat,  kalau sobat sudah download kemudian perhatikan bagian-bagian yang saya sudah tandai dan beserta penjelasannya, nah pada bagian section 1 hal ini ga usah menjadi perhatian sobat kecuali apabila ingin menambah metatag, description, keywords dan atribute lainnya biar blog menjadi SEO friendly tapi tidak akan berpengaruh pada layout template, yang menjadi hal utama bagaimana cara membuat template adalah umumnya pada section 2 dan section 3. Kedua section ini mempunyai keterkaitan satu sama lain, saya akan kasih contoh bagaimana section 2 dan 3 berhubungan.
Apabila sobat ingin mendeklarasikan elemen baru pada layout template maka pada section 2 sobat harus membuat kode cssnya contoh:

#elemenbaru {width:250px; margin:0, pading:10px;float:left}
Nah supaya element baru ini bisa di lihat di browser maka sobat juga harus mendeklarasiknya di section 3 contoh :

<div id='elemenbaru'>
<b:section class='sidebar' id='elementbaru' preferred='yes'/>
</div>

Ket : <b:section class='sidebar' id='sidebar' preferred='yes'/> merupakan suatu kode yang menampilkan drag and drop pada layout blogspot. jika sobat mengganti dengan no maka tidak bisa menambahkan page element widget baru, umumnya  kode ini saya banyak pakai yang perlu diperhatikan adalah pada id nya karena id ini harus unik sedangkan untuk class bisa di pakai untuk setiap element baru.
Karena memang struktutr kodenya template blogspot cukup rumit di harapkan sobat terbiasa dengan kode-kode tersebut agar menambah keahlian sobat , nah kalau mau yang tahu struktur postnya silahkan sobat ke beatiful beta banyak hal untuk menambah wawasan sobat dalam mengedit template.

NB : Original draft post 23 February 2009

16 comments:

  1. jadi pintar nih....banyak nyoba

    ReplyDelete
  2. trima kasih utk ilmu dan tutorialnya, mas Subagya.

    ReplyDelete
  3. ane tambahin dikit.

    b:section class='sidebar' id='elementbaru' preferred='yes'/

    lengkapnya......

    b:section class='sidebar' id='elementbaru' preferred='yes' showaddelement='yes'/

    "showaddelement='yes'" untuk menampilkan fitur "add a gadget" pada page element. kalo dikasih no kyk gini "showaddelement='no'" ya ga muncul "add a gadget"nya.

    satu lagi

    div id='elemenbaru'
    b:section class='sidebar' id='elementbaru' preferred='yes'/
    /div

    kalo udah dimasukkin widgetnya misal "labels" jadi kyk gini.

    div id='elemenbaru'
    b:section class='sidebar' id='elementbaru' preferred='yes'
    b:widget id='Label1' locked='false' title='Labels' type='Label'/
    /b:section
    /div

    "locked='false'" artinya kita mengijinkan untuk melakukan drag and drop pada element label itu. lawannya "locked='true'" artinya ga bisa di drag kyk element "blog post" itu.

    dah cukup nambahinnya. jadi master subagya ga terlalu mikirin pertanyaan. ntar keganggu acara tunangannya. wkakakakkak.

    ReplyDelete
  4. tambah rajin hobby ngedit blog nih
    biar bisa buat template sesuai keinginan kita sendiri
    thanks ya

    ReplyDelete
  5. tutorialnya keren, ditunggu tutorial selankutnya

    ReplyDelete
  6. kalau saya mah suka yang instan instan,

    ReplyDelete
  7. mampir sini selalu mendapat info bermanfaat yang baru, jadi nambah ilmu. makasih Chal
    salam hangat

    ReplyDelete
  8. tambah ilmu nie ane :)
    makasi infonya :)

    ReplyDelete
  9. bener-bener njilimet yap om mochal

    ReplyDelete
  10. jika mau buat template (jomlaa, wp, html) dengan cara cepat dan mudah tanpa harus tulis kode, coba aja software artisteer. contohnya, lihat blogku...

    ReplyDelete
  11. mas bisa bantu ga tlong kirim via email bahasa pemrogramannya/pake bahasa HTML bwat variasi template.thanks ya......

    ReplyDelete
  12. Dengan segenap jiwa dan raga saya minta dukungannya mas! andaikan anda tidak berkenan silakan hapus comentar saya ini, Makasih sebelumnya

    ReplyDelete
  13. hey broo ... salam knal .. kenapa elemen punya gue sulit di drag ya ... klo di drag tempatnya gak sesuai keinginan .. pleace ya jawabaannya ?

    ReplyDelete
  14. download di ziddu jg gk pa2, kan sama2 untung

    ReplyDelete
  15. untuk template yg default sy sudah agak bisa utak atik sendiri tp untuk template model magazine masih susah, seperti membuat widget html yg gak bisa di drag

    ReplyDelete