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:
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 2Section 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'> </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.
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
Under Creative Commons License: Attribution
First, you need traffic. Without traffic, you can’t build a community. The only way to build a community is by convertinh generic visitors into subscribers. Subscribers who cherish your content, join your email list and all of the other stuff. You could start by doing the SEO thing as honestly, SEO is the fastest way to get CONSISTENT traffic if done correctly.
