Kode Tag Blogger

tag <b:skin></b:skin> akan dirender menjadi tag <style id='page-skin-1' type='text/css'><!----></style>

perlu diketahui juga tag ini harus ada pada kerangka template dan didalamnya terdapat tag lagi yang bisa dituliskan yaitu

Variable

tag <Variable/> hanya bisa dituliskan didalam tag <b:skin></b:skin>

kegunaan tag ini yaitu untuk membuat template lebih mudah dimodifikasi melalui menu CUSTOMIZE

berikut atribut yang terdapat didalamnya

contoh penggunaan

<b:skin><![CDATA[ 
    /*
    <Variable name="bodyFont" description="Body Font" type="font" default="400 36px Damion, cursive" hideEditor="false"  value="400 18px Damion, cursive"/>
    */

    article {
        font : $(bodyFont)
    }
]]></b:skin>

Catatan : agar tag variablenya hilang saat dirender makak harus dikasih komentar /* kode variable disini */, contohnya seperti kode diatas

Group

tag <Group></Group> digunakan untuk mengkategorikan tag <Variable/>

tujuannya yaitu agar nantinya pas dicustomize bisa terlihat lebih kompleks dan tentunya mudah ditemukan

berikut atribut yang terdapat didalamnya

contoh penggunaan group untuk tag variable

<b:skin><![CDATA[ 
    /*
    <Group description="Bagian Utama Template">
    <Variable name="bodyFont" description="Body Font" type="font" default="400 36px Damion, cursive" hideEditor="false"  value="400 18px Damion, cursive"/>
    <Variable name="bodyColor" description="Body Color" type="color" default="#FFFFFF" hideEditor="false"  value="#FFFFFF"/>  
    </Group>
    */


    article {
        color: $(bodyColor);
        font : $(bodyFont);
    }
]]></b:skin>

berikut hasilnya saat membuka menu CUSTOMIZE

tag <b:template-skin></b:template-skin> digunakan untuk mengedit tampilan yang ada pada menu layout nantinya, kode yang digunakan juga harus dengan penulisan khusus

kode yang harus dituliskan yaitu berupa kode css yang harus diawali dengan body#layout

berikut contoh penggunaannya

<b:template-skin>
    <![CDATA[
    body#layout {min-width:960px;padding:100px 20px 0 !important;}
    body#layout .widget-content{box-shadow:none}
    body#layout #option h4{width: 100%;}
    body#layout::before {
        content: "Template Name";
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1;
        padding: 10px 20px;
        font-family: monospace;
        font-size: 18px;
        color: #607D8B;
        background: #fff;
        border-radius: 2px 4px;
        border: 1px solid #d6d6d6;
    }
    ]]>
</b:template-skin>

berikut hasilnya ketika membuka menu layout

tag <b:template-script/> digunakan untuk memanggil script bawaan blogger

saat ini yang diketahui hanya ada 2 saja yaitu

threaded_comments memanggil script komentar bertingkat

<b:template-script inline='true' name='threaded_comments'/>

indie memanggil script template bawaan blogger

<b:template-script async='true' name='indie' version='1.0.0'/>

tag <b:if></b:if> digunakan untuk membuat sebuah kondisi if, jadi nanti data bisa ditampilkan menggunakan kondisi tertentu

contoh penulisan tag conditional

<b:if cond='data:view.isHomepage'>
    home
    <b:elseif cond='data:view.isMultipleItems'/>
    post and pages
    <b:else/>
    not home, post and pages
</b:if>

berikut daftar kode kondisi yang sering digunakan

tag <b:loop></b:loop> digunakan untuk melakukan perulangan (loop)

contoh penulisan kode tag b:loop

<b:loop index='index' var='label' values='["Jogja", "Jakarta", "Bogor", "Bekasi"]'>
    <data:label/>
    <data:index/>
</b:loop>

atribut yang terdapat pada tag b:loop diantaranya

• values data yang akan dilakukan perulangan
• var nama yang akan dipakai untuk mendapatkan data yang sedang diloop
• index nama variable yang akan dipakai untuk mendapatkan index data yang sedang diloop
• reverse data dibaca secara terbalik, di isi dengan nilai boolean (true / false)

tag <b:switch></b:switch> digunakan untuk membuat kondisi mirip seperti kode tag b:if

berikut penulisan kodenya

<b:switch var='data:blog.locale'>
    <b:case value='id' />
    Nama saya adalah Huba
    <b:case value='en' />
    My Name is Huba
    <b:default/>
    if not id and en
</b:switch>

tag b:class

tag <b:class/> digunakan untuk membuat atribut class pada element diatasnya

selain itu juga tag b:class bisa digunakan menggunakan kondisi

misalnya saya ingin agar tag body memiliki nama class 'is-home' ketika dihalaman home

kemudian saat dihalaman post akan berganti classnya menjadi 'is-post'

maka penulisan kodenya seperti ini

<body>
    <b:class cond='data:view.isHomepage' name='is-home'/>
    <b:class cond='data:view.isPost' name='is-post'/>
</body>

kalian juga bisa menggunakan expression pada b:class, contohnya

<b:class expr:name='data:view.isHomepage ? "is-home" : "is-other"'/>

tag b:attr

tag <b:attr/> digunakan untuk membuat atribut pada sebuah tag dengan kondisi

contoh penggunaan

<body>
    <b:attr name='class' value='is-home' cond='data:view.isHomepage' />
    <b:attr name='class' value='is-post' cond='data:view.isPost' />
</body>

tag <b:section></b:section> digunakan untuk memanggil sebuah widget (b:widget) yang tersedia pada blogger

sedangkan tag b:widget-settings akan digunakan untuk pengaturan dari setiap widget yang ada dengan mengetikannya didalam tag b:widget-setting (tidak pakai s)

kalian juga harus tau setiap b:widget-settings isinya selalu berbeda dari setiap jenis widget yang ada, misalnya widget blog dengan widget popularpost akan berbeda pengaturannya

misalnya saya ingin memanggil widget Blog maka penulisannya seperti dibawah ini

<b:section showaddelement='true' id="ContentSection">
    <b:widget id='Blog1' locked='true' title='Blog Widget' type='Blog' version='2' visible='true'>
        <b:includable id='main'>
            <b:loop values='data:posts' var='post'>    
                <data:post.title/>
            </b:loop>
        </b:includable>
    </b:widget>
</b:section>

untuk lebih detail lagi mari kita bahas semua atribut dan widget apa saja yang ada

Atribut pada tag b:section

Atribut pada tag b:widget

tag <b:comment></b:comment> digunakan untuk memberi komentar pada kode yang ada, dan bisa juga ditampilkan kedalam browser dalam bentuk komentar html

contoh penggunaannya

<b:comment render="true">Please keep this credit link for respect the author :).</b:comment>

tag <b:defaultmarkups></b:defaultmarkups> digunakan untuk membuat kode default / menimpa kode bawaan blogger agar menggunakan kode dari default markup

selain itu kode default markup juga bisa digunakan sebagai layouting kode, yang artinya kalian bisa memisah misah kode dan dapat memanggilnya dengan mudah

berikut penulisan kodenya

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='header'>
      <div>header-code</div>
    </b:includable>
    <b:includable id='footer'>
      <div>footer-code</div>
    </b:includable>    
  </b:defaultmarkup>
  <b:defaultmarkup type='Blog'>
    <b:includable id='main'>
      <div>relace with me</div>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

pada kode diatas terlihat ada kode b:defaultmarkup dengan atribut type bernilai Common, yang artinya kode b:includable yang berada didalamnya dapat diletakan dimana saja

untuk lebih jelasnya atribut type tersebut memiliki beberapa nilai diantaranya

berikut cara penggunaannya

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='test'>
      <div>hello-this-code-from-defaultmarkup</div>
    </b:includable>  
  </b:defaultmarkup>
</b:defaultmarkups>

<b:include name='test'/>

tag ini digunakan untuk menggunakan data:messages dengan parameter

misalnya ketika menggunakan data:messages.numberOfComments secara langsung maka akan muncul data

{numComments,plural, =0{Tidak ada komentar}=1{1 komentar}other{# komentar}}

maka dari itu untuk mengatasinya harus menggunakan tag b:message yang bisa mengirim parameter pada data tersebut

contoh penggunaan b:message

<b:message name='messages.numberOfComments'>
    <b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>

tag <b:with></b:with> digunakan untuk memfilter data agar tidak digunakan nantinya ketika melakukan include sebuah kode

misalnya contoh kasus ketika ingin agar postingan yang memiliki label 'no-show' tidak boleh ditampilkan maka dengan menggunakan b:with ini bisa dilakukan

contoh penulisan kodenya

<b:section id='qieu'>
    <b:widget id='Blog1' type='Blog'>
    <b:includable id='main'>
    <b:with var='posts'
    value='data:posts filter
    (post => post.labels none (label => label.name == "no-show"))'>
    <b:include name='super.main' />
    </b:with>
    </b:includable>
    </b:widget>   
</b:section>

tag <b:tag></b:tag> digunakan untuk membuat tag html

contoh penggunaannya

<b:tag name='a' cond='not data:view.isHomepage' expr:href='data:blog.homepageUrl'>
    <data:blog.title />
</b:tag>

atribut yang ada pada b:tag

• name digunakan untuk memberitahu element html apa yang akan dibuat
• cond eksekusi kode ketika cocok dengan kondisi tertentu

selain kedua atribut diatas maka akan dikonversi menjadi atribut element yang akan dibuat, contohya kode diatas menyertakan atribut expr:href

tag <b:eval/> digunakan untuk memanggil data menggunakan expression

dengan mengunakan kode b:eval ini nantinya data bisa dimanipulasi

contoh penggunaan

<b:eval expr='data:blog.locale.language ?: &quot;auto&quot;'/>