Belajar Membuat Template Sendiri-bag.2

Setelah sebelumnya kita telah belajar tentang Struktur layout template,sekarang kita belajar untuk memahami struktur kode template yang tentunya akan berisi kode-kode,yang penting buat sobat blogger adalah pemahaman kode tersebut sudah cukup untuk dasar membuat template sendiri.yang saya dapatkan setelah membaca artikel belajar desain layout bag.2 dari blog THINKING OUT OF THE BOX.dan berikut penjelasanya:

Semua template blogspot umumnya dibagi menurut pembagian ini, dan menurut pengamatannya 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'>

<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>

<div class='clear'> </div>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> 
</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.

Seperti itu lah yang di jelaskan di artikel belajar desain layout bag.2 ,semoga bermanfaat!!

Read more: http://subagya.blogspot.com/2009/11/belajar-desain-layout-template-bag2.html#ixzz1w8WHuQWz

Search

Sunday, May 27, 2012