Salah satu cara untuk membuat pengunjung merasa betah singgah ke blog adalah dengan tampilan yang bagus. Bagi yang senang utak-atik template blogspot tentu sudah tahu seluk-beluk template, atau mungkin juga bagi pemula - seperti saya - yang ingin utak-atik template blogspot agar tampilan blognya sedap dipandang mata dan serbaguna.
Berikut beberapa hal yang harus diketahui mengenai bagian-bagian penting yang membentuk template blogspot beta sesuai dengan yang disebutkan oleh Vin. Beliau secara ringkas menyebutkan ada lima bagian yang membentuk template blogspot, yaitu:
1. Bagian bahasa XML
2. Bagian kepala
3. Bagian variable definition
4. Bagian CSS
5. Bagian body
Bagian bahasa XML
Pada bagian ini terdiri atas deklarasi bahasa XML pada template blogspot, jika diperhatikan pada halaman Edit HTML maka di bagian paling atas akan terlihat kode-kode sebagai berikut:
Dalam kode tersebut, pada baris pertama merupakan deklarasi XML yang menyatakan bahwa dokumen tersebut berekstensi XML. Baris kedua merupakan deklarasi HTML sedangkan baris ketiga merupakan deklarasi XHTML, yaitu HTML versi XML.
Bagian kepala
Mulai kepada bagian kepala (head) yang terdiri dari head, title, dan metatag. Hal ini dapat kita lihat pada kode-kode berikut:
Jika diibaratkan dengan tubuh manusia, maka head adalah kepala, title adalah nama, sedangkan meta adalah identitas agar diketahui orang lain.
Bagian variable definition
Dalam template blogger beta, variable definition berfungsi untuk mengatur jenis huruf dan warna. Hal ini dapat dilihat pada tab template designer. Dalam template, variable definition akan terlihat antara kode <b:skin><![CDATA[ dan ]]><b:skin>. Lengkapnya akan terlihat seperti kode berikut:
Bagian CSS
Cascading Style Sheet (CSS) merupakan salah satu bagian penting pula dalam membentuk template blogspot. Diletakkan didalam tag CDATA pula yang diakhiri dengan kode ]]>. Contoh Cascading Style Sheet tersebut terlihat seperti berikut:
Sedikit catatan, dari pertama sampai CSS ini masuk ke dalam bagian head.
Bagian body
Bagian terakhir yang membentuk template blogger baru adalah body. Bagian ini diawali dengan kode dan diakhiri dengan , kode yang ada dalam body mengatur dan memisahkan antara tampilan header, main, sidebar serta footer. Hal ini dapat dilihat dari kode berikut:
Penutup keseluruhan template akan diakhiri dengan tag penutup </html>. Demikian sekilas mengenai pembentuk template pada blogger baru.
Kembali ke atas
Sumber: Blog Doctor
Berikut beberapa hal yang harus diketahui mengenai bagian-bagian penting yang membentuk template blogspot beta sesuai dengan yang disebutkan oleh Vin. Beliau secara ringkas menyebutkan ada lima bagian yang membentuk template blogspot, yaitu:
1. Bagian bahasa XML
2. Bagian kepala
3. Bagian variable definition
4. Bagian CSS
5. Bagian body
Bagian bahasa XML
Pada bagian ini terdiri atas deklarasi bahasa XML pada template blogspot, jika diperhatikan pada halaman Edit HTML maka di bagian paling atas akan terlihat kode-kode sebagai berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>
<html 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'>
Dalam kode tersebut, pada baris pertama merupakan deklarasi XML yang menyatakan bahwa dokumen tersebut berekstensi XML. Baris kedua merupakan deklarasi HTML sedangkan baris ketiga merupakan deklarasi XHTML, yaitu HTML versi XML.
Bagian kepala
Mulai kepada bagian kepala (head) yang terdiri dari head, title, dan metatag. Hal ini dapat kita lihat pada kode-kode berikut:
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<META content='' name=''/>
<meta content='' name='Description'/>
<meta content='' name='keywords'/>
<meta content='index,follow' name='robots'/>
<b:include data='blog' name='all-head-content'/>
<META content='' name=''/>
<meta content='' name='Description'/>
<meta content='' name='keywords'/>
<meta content='index,follow' name='robots'/>
Jika diibaratkan dengan tubuh manusia, maka head adalah kepala, title adalah nama, sedangkan meta adalah identitas agar diketahui orang lain.
Bagian variable definition
Dalam template blogger beta, variable definition berfungsi untuk mengatur jenis huruf dan warna. Hal ini dapat dilihat pada tab template designer. Dalam template, variable definition akan terlihat antara kode <b:skin><![CDATA[ dan ]]><b:skin>. Lengkapnya akan terlihat seperti kode berikut:
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/> <Group description="Page Text" selector=".content-inner">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Courier New', Courier, FreeMono, monospace;"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#000000"/> </Group>
......
/*
-----------------------------------------------
Blogger Template Style Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/> <Group description="Page Text" selector=".content-inner">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Courier New', Courier, FreeMono, monospace;"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#000000"/> </Group>
......
Bagian CSS
Cascading Style Sheet (CSS) merupakan salah satu bagian penting pula dalam membentuk template blogspot. Diletakkan didalam tag CDATA pula yang diakhiri dengan kode ]]>. Contoh Cascading Style Sheet tersebut terlihat seperti berikut:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread) $(body.background.override);
}
body.mobile {
padding: 0 $(content.shadow.spread.webkit) $(content.shadow.spread.webkit);
}
.............
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
]]></b:skin> </head>
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread) $(body.background.override);
}
body.mobile {
padding: 0 $(content.shadow.spread.webkit) $(content.shadow.spread.webkit);
}
.............
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
]]></b:skin> </head>
Sedikit catatan, dari pertama sampai CSS ini masuk ke dalam bagian head.
Bagian body
Bagian terakhir yang membentuk template blogger baru adalah body. Bagian ini diawali dengan kode dan diakhiri dengan , kode yang ada dalam body mengatur dan memisahkan antara tampilan header, main, sidebar serta footer. Hal ini dapat dilihat dari kode berikut:
<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>
.....................
<b:section-contents id='sidebar-right-2-1'/>
<b:section-contents id='sidebar-right-2-2'/>
<b:section-contents id='sidebar-right-3'/>
<b:section-contents id='footer-1'/>
<b:section-contents id='footer-2-1'>
<b:widget id='HTML3' locked='false' title='Say Something' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Hotnews' type='NewsBar'/>
</b:section-contents>
<b:section-contents id='footer-2-2'>
<b:widget id='HTML2' locked='false' title='Follow Me' type='HTML'/>
</b:section-contents>
<b:section-contents id='footer-2-3'>
<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'/>
</b:section-contents>
</html>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>
.....................
<b:section-contents id='sidebar-right-2-1'/>
<b:section-contents id='sidebar-right-2-2'/>
<b:section-contents id='sidebar-right-3'/>
<b:section-contents id='footer-1'/>
<b:section-contents id='footer-2-1'>
<b:widget id='HTML3' locked='false' title='Say Something' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Hotnews' type='NewsBar'/>
</b:section-contents>
<b:section-contents id='footer-2-2'>
<b:widget id='HTML2' locked='false' title='Follow Me' type='HTML'/>
</b:section-contents>
<b:section-contents id='footer-2-3'>
<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'/>
</b:section-contents>
</html>
Penutup keseluruhan template akan diakhiri dengan tag penutup </html>. Demikian sekilas mengenai pembentuk template pada blogger baru.
Kembali ke atas
Sumber: Blog Doctor
0 comments:
Posting Komentar