Home
Blogger

Tag b:skin dan b:template-skin pada template blogger


Kali ini kita cari tahu pengertian dan fungsi dari tag b:skin dan b:template. Pada tutorial sebelumnya kita sudah belajar struktur dasar membuat template blogger. Pada dasarnya hampir sama dengan tag HTML pada sebuah website akan tetapi ada penambahan tag b:skin dan b:section agar dapat berjalan di platform blogspot. Oleh sebab itu kita akan belajar apa itu b:skin, selain b:skin ada juga b:template dan berikut ini penjelasanya.


Penjelasan <b:skin> dan <b:template-skin>

Pada xml blogger terdapat Tag <b:skin> dan <b:template-skin>. Fungsi dari kedua tag  ini adalah untuk mengatur tampilan pada tema atau template sebuah blog. Didalam tag <b:skin> dan <b:template-skin> inilah dapat dituliskan sebuah CSS dan pendeklarasian variable.

  • <b:skin> wajib ada di tempate xml bloggerl dan  hanya diperbolehkan 1 penulisan syntax saja.
  • <b:template-skin> digunakan berfungsi untuk mengatur tampilan pada dashboard blogger, tag ini bisa ditulis ataupun tidak
  • <b:skin>dan <b:template-skin> ditulis di dalam rentang tag html <head>...</head> pada template xml.

Contoh Penulisan Syntax

Berikut adalah contoh dalam penulisan dari syntx <b:skin> dan <b:template-skin> pada  template blogger. Syntax ini ditulis diantara  tag html <head>...</head>

<b:skin>


<b:skin>
<![CDATA[
    
]]>
</b:skin>

<b:template-skin>


<b:template-skin>
<![CDATA[
    
]]>
</b:template-skin>

Hasil Render HTML

Berikut ini adalah hasil render HTML saat kamu save file XML kamu.


<b:skin>


<style id='page-skin-1' type='text/css'>

</style>

<b:template-skin>


<style id='template-skin-1' type='text/css'>

</style>

Contoh Penggunaan <b:skin>


<b:skin>
<![CDATA[
html {
  font-family: sans-serif;
  font-size: 16px;
}  
]]>
</b:skin>

Contoh Penggunaan <b:template-skin>


<b:template-skin>
<![CDATA[
#layout ul, #layout ol {
    list-style-type: none;
}
]]>
</b:template-skin>


Jika CSS yang digunakan hanya diperuntukan pada tata letak, mungkin cara berikut lebih baik digunakan.

<bif cond='data:view.isLayoutMode'>
<b:template-skin>
<![CDATA[
/* css layout mode */

]]>
</b:template-skin>
</bif>
Refrensi :

Post a Comment