Desain blog dibangun melalui kode html termasuk kode css di dalamnya. Kode css memegang peran luar biasa penting karena "jika diandaikan sebagai sebuah bangunan", kode css adalah kode "penentu bentuk, rupa dan tata ruang bangunan tersebut". xHTML adalah "kerangka bangunan", sedang kode css adalah "material/elemen yang membentuk dan mengatur segala elemen bangunan sehingga tercipta sebuah bangun yang tertata rapi dengan segala batas ruang dan pembagiannya serta menjadi material utama pengisi pernak-pernik penghias bangunan berikut ruangan". Kode css ini terwadahi dalam "tag style" dan pada umumnya diletakkan di dalam tag head, diantara tag pembuka (<head>) dan penutupnya (</head>). Jika ada tag style berikut dokumen css disimpan/diletakkan di dalam tag body (diantara <body> dan </body>), biasanya ini hanya dengan pertimbangan untuk memudahkan pengguna/blogger dalam menggunakan widget atau mengikuti panduan dalam tutorial blog/web. Pada beberapa kasus yang lain, penempatan tag style berikut kode css dilakukan untuk kepentingan demo yang terintegrasi dalam posting.
Menggunakan tag style penting sekali diperhatikan karena acap kali terjadi digunakan justru di dalam tag style yang sudah ada. Peristiwa seperti ini banyak terjadi karena pemahaman yang kurang tentang bagian-bagian dari desain blog. Khususnya di blogger/blogspot, beberapa blogger tidak menyadari bahwa "untuk menyimpan kode css di atas kode ]]>/b:skin> tidak perlu menggunakan tag style" karena sebenarnya di bagian tersebut sudah menggunakan tag style (dalam template tag style tidak terlihat. tag style ini hanya akan terlihat ketika dilakukan open source code).
<title><data:blog.pageTitle/></title>
Bentuk kode-nya seperti berikut: <b:skin><![CDATA[
Tag penutupnya (</style>) berbentuk ]]></b:skin>.
tag style di template blogger
Pembentuk tag style (tag pembuka style) dalam template blogger terletak di atas variable definition atau di bawah kode:<title><data:blog.pageTitle/></title>
Bentuk kode-nya seperti berikut: <b:skin><![CDATA[
Tag penutupnya (</style>) berbentuk ]]></b:skin>.
<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"/>
...
...
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* 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)
}
...
...
etc
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>
Jika melihat melalui "open source code", akan terlihat dalam bentuk :
<style id='page-skin-1' type='text/css'><!--/*
-----------------------------------------------
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"/>
...
...
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* 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)
}
...
...
etc
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
--></style>
Satu lagi pembentuk tag style adalah pada kode "<b:template-skin>" dan "</b:template-skin>" yang terletak di bawah kode "]]></b:skin>".
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
<![CDATA[
body {
min-width: $(content.width);
}
...
...
etc
]]>
<b:template-skin>
Jika dilihat melalui "open source code" bentuknya sbb:
<style id='template-skin-1' type='text/css'><!--
body {
min-width: $(content.width);
}
...
...
etc
--></style>
Beberapa model penulisan tag style
Ada beberapa cara menggunakan tag style, termasuk diantarantanya untuk dokumen css yang tersimpan di file hosting (menggunakan URL).Tag style yang umum digunakan
<style type="text/css"> </style>
<style type="text/css" media="screen">
</style>
attribute media berfungsi untuk optimalisasi kode css berkaitan dengan media yag digunakan. Beberapa value/nilai dari attribute media adalah screen, tty, tv, projection, handheld, print, braille, aural, allDi bawah ini telah disertakan contoh penempatan dan penggunaan tag style yang benar dan yang salah. Yang perlu diperhatikan adalah pada kasus penempatan tag style yang salah ini banyak terjadi ketika blogger menyimpan kode css di template dalam box edit html di atas kode ]]></b:skin>. Kesalahan terjadi karena digunakannya tag style sehingga tag style tersebut berada di dalam tag style.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar