Kode Tag pada Blogger beserta Penjelasannya

irfan-photo irfan · 2 bulan lalu

hal yang akan dibahas kali ini adalah tag blogger

kode tag blogger ini nantinya yang akan sering digunakan saat ingin memanggil sebuah data, misalnya ingin memanggil data postingan, maka kita akan gunakan tag blogger ini

kalian juga harus tau penulisan kode blogger selalu diawali dengan b:nama_tag, jadi nantinya kalian bisa membedakan mana kode blogger dengan kode lainnya dengan mudah

langsung saja saya bahas dan coba untuk dipahami sedikit demi sedikit lama-lama pasti menjadi pusing :)

b:skin

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

Atribut Nilai Penjelasan
name string mendefinisikan nama variable yang dibuat
description string deskripsi yang akan tampil nantinya dimenu CUSTOMIZE
type automatic, font, color, length, background jenis variable yang bisa digunakan
default any nilai default dari variable ini nantinya, jika nantinya nilai pada variable ini berubah maka saat direset akan kembali kenilai default (resetnya dimenu CUSTOMIZE)
hideEditor true / false menghilangkan variable dimenu CUSTOMIZE
value any nilai dari variable ini nantinya

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/>

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

berikut atribut yang terdapat didalamnya

Atribut Nilai Penjelasan
description text Digunakan untuk mendeskripsikan nama grupnya (nanti nama descnya tampil dimenu CUSTOMIZE)

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

blogger-bskin-variable-and-group.

b:template-skin

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

blogger-btemplate-skin-preview

b:template-script

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'/>

b:if

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

Kode Keterangan
<b:if cond='data:blog.isMobileRequest'></b:if> Mobile
<b:if cond='data:view.isHomepage'></b:if> Homepage
<b:if cond='data:view.isPost'></b:if> Post
<b:if cond='data:view.isPage'></b:if> Page
<b:if cond='data:view.search.label'></b:if> Labels
<b:if cond='data:view.search.query'></b:if> Search
<b:if cond='data:view.search and !data:view.search.label and !data:view.search.query'></b:if> Index
<b:if cond='data:view.isArchive'></b:if> Archive
<b:if cond='data:view.isError'></b:if> Error
<b:if cond='data:view.isSingleItem'></b:if> Single Item
<b:if cond='data:view.isMultipleItems'></b:if> Multiple Item
<b:if cond='data:view.isPreview'></b:if> Preview
<b:if cond='data:view.isLayoutMode'></b:if> Layout Mode
<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'></b:if> Multiple

b:loop

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)

b:switch

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>

b:class dan b:attr

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:widget dan b:widget-settings

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 Nilai Penjelasan
name any Nama section yang nantinya ditampilan pada menu layout
maxwidgets number maksimal jumlah widget yang boleh ditaruh pada tag b:section pada menu layout nantinya
showaddelement true / false memunculkan / menghilangkan link Add a Gadget pada menu layout
preferred yes untuk menandakan widget utama

Atribut pada tag b:widget

Atribut Nilai Penjelasan
id sesuai type widget id dari type widget dan penulisannya tidak boleh ada yang sama, misalnya type widgetnya Blog, maka idnya harus ditulis Blog1 dan jika ingin memanggil 2 widget harus memakai id yang berbeda misal Blog2
locked true / false widget tidak dapat dihapus maupun dipindahkan pada halaman layout
title any title yang akan digunakan nantinya pada kode widget, dan cara memanggilnya dengan cara <data:title/>
type AdSense, Attribution, Blog, BlogArchive, BloggerButton, BlogList, BlogSearch, ContactForm, FeaturedPost, Feed, Followers, Header, HTML, Image, Label, LinkList, PageList, PopularPosts, Profile, ReportAbuse, Stats, Subscribe, Text, TextList, Translate, Wikipedia type widget yang tersedia saat ini diblogger, yang paling sering digunakan yaitu Header, Blog, FeaturedPost, PopularPosts, Label
version 2 versi widget yang digunakan, hanya berisikan angka 2 dan jika ingin memakai versi 1 maka tidak perlu menyertakan atribut ini
visible true / false digunakan untuk mengaktifkan dan menonaktifkan widget, bisa dilakukan juga pada menu layout nantinya
cond data widget dapat menggunakan kondisi agar nantinya hanya bisa muncul dihalaman tertentu

b:comment

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>

b:defaultmarkups, b:includable & b:include

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

Nilai Penjelasan
Common membuat semua kode b:includable dapat diakses secara global
semua jenis widget membuat kode b:includable didalamnya dapat menimpa kode bawaan kode widget atau jika tidak ada nama yang sama maka akan membuatnya dapat diakses pada widget tersebut

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'/>

b:message & b:param

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>

b:with

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:width 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>

b:tag

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

b:eval

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;'/>
Terakhir diupdate 29 Jun 2022 06:47 WIB
Daftar Konten Belajar Kode Template Blogger