Template adalah alat untuk membentuk tata letak tampilan blog yang standard. Apabila anda menukar template setiap laman atau kawasan dalam template akan berudah secara automatic. Template menyediakan kawalan tambahan yang standard kepada blog anda, semuanya bergantung kepada jenis yang anda gunakan.
Template Blogger terbahagi kepada lima bahagian utama...........
Perhatian : Template yang dibincangkan adalah Son of Moto.
BAHAGIAN PERTAMA mengandungi pengistiharan bahasa XML:
<?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'>
Baris pertama adalah pengistiharan XML, iaitu mengenal pasti dokumen sebagai dokumen XML. Baris kedua adalah pengistiharan HTML. Baris ketiga adalah pengistihran XHTML dimana ia adalah XML versi daripada HTML.
BAHAGIAN KEDUA mengandungi bahagian pertama daripada 'head', title dan Metatags :
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<META content='6UdGiVvyAoLArGpux3xzus9nP4VEkAdsnY8mgwQKg4g=' name='verify-v1'/>
<meta content='Bet Blogger for Dummies' name='Description'/>
<meta content='beta blogger,blogger,blog,hacks,hacking beta blogger template,template,beta blogger template,
blogskin,Google blog, google blogger' name='keywords'/>
<meta content='index,follow' name='robots'/>
Metatags memberikan maklumat kepada engin pencari tentang TAJUK BLOG ANDA dan amat penting untuk mengindex blog anda.
BAHAGIAN KETIGA adalah tempat 'Variable definitions' dinyatakan dan bertanggungjawab untuk 'Jenis Font dan Warna' subtab di bawah tab Template:
Ini adalah kodnya:
<b:skin><![CDATA[/*
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color"
type="color" default="#555544" value="#555544">
<Variable name="pageHeaderColor" description="Blog Title Color"
type="color" default="#ffffee" value="#ffffee">
.............
Disini bahagian CDATA bermula dan digunakan untuk menyisipkan dokumen XML dalam dokumen XML yang lain. Bahagian CDATA bermula dengan <[CDATA] dan berakhir dengan]]>. Prosesor XML markup mengabaikan semua, kecuali untuk]]> (yang bermaksud anda tidak mungkin dapat menyertakan bahagian CDATA di bahagian CDATA yang lain). Kerana telah terdapat cara pengisytiharan XML dalam blok. XML CDATA hanya mengatakan tidak kepada data di dalam blok sehingga sampai ke penutup]]>, dan ia akan kembali memproses XML secara normal.
Anda boleh <![CDATA []]> dimanapun di luar tag dalam dokumen XML.
BAHAGIAN KEEMPAT adalah bahagian CSS (Cascading Style Sheet):
/* Primary layout */
body {
body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}
img {
border: 0;
display: block;
}
.clear {
clear: both;
}
...........
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
padding-top: 0;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
}
]]></b:skin>
</head>
Perhatikan bahagian CDATA berakhir disini dengan ]]>
Bahagian kedua, ketiga dan keempat membentuk 'head'.
BAHAGIAN KELIMA adalah 'body' :
<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='Blog Testing Purpose (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</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>
PERHATIAN : TIDAK SEMUA KOD DI TAMPILKAN, CUMA SEBAHAGIAN SEBAGAI CONTOH.
Tiada ulasan:
Catat Ulasan