» » » Belajar desain layout template bag.2

Belajar desain layout template bag.2

Pembahasan mengenai cara membuat desain template blogspot sebenarnya sudah ada dalam draft saya sejak lama dan sudah dikemas dalam e-book yang nantinya akan saya bagikan secara gratis namun dalam pengerjaannya belum sempurna mengingat kesibukan saya sebagai seorang medical representative yang cukup menyita waktu, jadi kali ini saya akan melanjutkan bagaimana cara membuat template blogspot sederhana bagian 2, kalau sobat ingin membaca bagian sebelumnya silahkan baca kembali Belajar desain layout template bagian 1. Kalau sudah baca kita lanjutkan kembali di mana pada pembahasan sebelumnya membahas layout stuktur layout template dan telah saya gambarkan secara outlinenya.
Pada bagian kedua cara membuat template blogspot saya akan ajak sobat memahami struktur kode template yang tentunya akan berisi kode-kode yang menjlimet, yang penting buat sobat blogger adalah pemahaman kode tersebut sudah cukup untuk dasar membuat template sendiri.
Semua template blogspot umumnya dibagi menurut pembagian ini, dan menurut pengamatan saya bagian tersebut dibagi menjadi 3 section.
Bagian-bagian tersebut :

Section 1.

Merupakan keterangan kode pengenalan template dan berisi informasi-informasi didalamnya, 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, ya ga perlu jago asal tahu perbedaan margin dan padding aja juga cukup :p , tetapi sobat secara dasar harus paham dengan kode CSS yang 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 2

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.

NB :  Untuk variable umumnya seperti ini terletak pada section 2  dan biasanya hal ini untuk mengubah setting font dan color dalam dashboard blogspot  Layout > Fonts and colors  dan tidak perlu mutlak untuk di gunakan.

-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
*/

Pada section variabel ini yang perlu di perhatikan adalah ketika merubah variabel harus di ikuti string $ di depan variabel kemudan di terapkan pada bagian section CSS. contoh : variabel bgcolor diganti menjadi latarwarna maka penulisan di section cssnya harus memakai tanda $ sehingga menjadi $latarwarna.
Posted by at
Labels: ,

20 comments:

  1. Sungai KuantanNovember 17, 2009 at 2:14 AM

    makasih sobt...
    semoga dgn postingan ini saya bisa bisa belajar mbuat templt blogspot.. skali lagi.. makasih...
    sukses sllu buat kmu sobt..

    ReplyDelete
  2. Mengembalikan Jati Diri BangsaNovember 17, 2009 at 2:57 AM

    Thanks sobat, saya banyak belajar dari blog anda. Semoga yang akan datang update update blog anda akan berdatangan. Saya tunggu.

    NB : Mohon dukungan anda dalam kontes seo Mengembalikan Jati Diri Bangsa thanks

    ReplyDelete
  3. JRNovember 17, 2009 at 11:09 AM

    saya sering otak atik tapi gag pernah ngerti om...jadi kadang template ane berantakan gag karuan

    ReplyDelete
  4. Diana YusufNovember 17, 2009 at 11:09 AM

    selamat siang kang.....wakh makin keren aja nih

    ReplyDelete
  5. HerroNovember 17, 2009 at 12:01 PM

    hmmm ic ic ic

    ReplyDelete
  6. hadiNovember 17, 2009 at 2:04 PM

    wah susah juga ya, perlu dipelajari khusus nich

    ReplyDelete
  7. hadiNovember 17, 2009 at 2:07 PM

    saya pernah blajar bahasa pemrograman, jadi dah brani utak atik dikit-dikit

    ReplyDelete
  8. AnonymousNovember 17, 2009 at 5:40 PM

    sip jadi paham pembagian berdasarkan 'section'.
    - section 1 isi utamanya: doctype, meta, tittle, dll
    - section 2: CSS
    - section 3: HTML nya.

    oh iya di section 3 ada </head> itu agak rancu kalo digabung di section 3, kayaknya sih.

    jadi mungkin section 1 itu termasuk didalamnya ada CSS yang ditutup sama </head> akhirnya. tapi ngak tau juga deh baiknya gimana :)

    sip thanks.

    ReplyDelete
  9. SubagyaNovember 17, 2009 at 6:17 PM

    @choen : iya juga sih bro, thanks atas masukannya

    ReplyDelete
  10. SubagyaNovember 17, 2009 at 6:27 PM

    @ hadi: sama-sama bro ane juga lagi tertairik ama bahasa program terutama yang berhubungan dengan desain web
    @ herro : wah suhu ic ic ic aja hehehehhe
    @ JR : Trial and error kang hehehhe
    @ harry : anenya yang keren apa blognya :p
    @ sungai : sukses juga buat ente
    @ plaza : ane dukung doa yah.. hehhehehehe

    ReplyDelete
  11. RaRa WulanDecember 8, 2009 at 11:20 AM

    sebenernya masih bingung :(
    tapi masih mencoba terimakasih sudah memposting cara2nya :)

    ReplyDelete
  12. Ali | DudutDecember 28, 2009 at 8:20 AM

    ohoho.. maknyus mang.. tengkyu

    ReplyDelete
  13. Astaga.com lifestyle on the netJanuary 5, 2010 at 3:49 PM

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

    ReplyDelete
  14. sinjay schoolFebruary 24, 2010 at 12:45 AM

    tambah mengerti jadinya nih, thanks

    ReplyDelete
  15. Blogger TemplateApril 26, 2010 at 7:14 AM

    Salam kenal mas,
    Sudah sampai bagian ke dua, saya masih bingung juga...belajar lagi aaah

    ReplyDelete
  16. blogger pemalasMay 4, 2010 at 2:39 AM

    wah hebat

    ReplyDelete
  17. s. wahyudiMay 5, 2010 at 11:51 AM

    thanks tip2nya dan ini yang ane cari, moga bisa pahami dan praktekkan lagi di blog.thanks

    ReplyDelete
  18. belajar seo wordpressMarch 13, 2011 at 9:11 PM

    kalo mo nyari daftar kode / referensi buat blogspot kira kira dimana gan?? saya taunya untuk wordpress doang di http://codex.wordpress.org.
    lagi belajar nge-disain blogspot nih....
    mohon infonya. trims.

    ReplyDelete
  19. Supriyadi ProFebruary 29, 2012 at 9:58 PM

    Saya tetep pengin belajar walaupun pusing mas.

    ReplyDelete
  20. mebel jeparaJanuary 5, 2015 at 6:59 PM

    apakah template desain sendiri berpengaruh terhadap loadingsebuah web bang......

    ReplyDelete

Subscribe to: Post Comments (Atom)