Struktur Dasar Tema Blogger Custom ( Part 2 )

 Melanjutakan posting sebelumnya yang berjudul Struktur Dasar Tema Blogger Custom ( Part 1 ) yang sudah membahas Layout Dasar dari tags xhtml di blogger b:section dan b:widget. 

Mengenal tag b:includable

Tag ini menentukan bagaimana penanganannya jika diminta untuk "includable". Tag ini memiliki dua atribut yaitu id, yang merupakan atribut wajib dan bisa sama jika ada di dalam tag widget yang berbeda. Harus ada includable dengan id "main" di dalam setiap b:widget. Includable tersebut adalah apa yang dipanggil pemprosesan pemrosesan widget. Semua id lain dapat diberi nama apa pun yang mereka inginkan karena Anda akan secara manual memberi kode panggilan kepada mereka. Atribut lainnya adalah var. Atribut ini menyimpan data yang diteruskan saat Anda memanggil b:include dengan atribut data. Atribut var bersifat opsional.

Di dalam elemen b:includable, bisa berupa HTML biasa yang didalamnya terdapat data dari tag. Mereferensikan tag data saat berada di dalam includable, akan me-referensi-kan data yang diteruskan ke dalam widget (data widget). Jika var tidak ditentukan nilainya, data yang diteruskan ke includable akan menjadi root dari panggilan data. Jika var disetel, data root akan mengarah ke data widget dan var akan mengarah ke data yang diteruskan.

<b:section class="sidebar" id="sidebar" showaddelement="yes" growth="vertical">
	<b:widget type="PageList" id="PageList" locked="no">
		<b:includable id="main">
			<ul>
				<li>Page List Here, When I Know How To Loop</li>
			</ul>
		</b:includable>
	</b:widget>
</b:section>

Mengenal tag b:loop

Looping di blogger sangat penting karena banyak data dalam array, seperti posting, label, komentar, dan daftar. Perulangan akan menelusuri setiap elemen tersebut dan memberi Anda variabel data baru untuk mereferensikan elemen tersebut.

b:loop berisi dua atribut, salah satunya adalah sebuah nilai yang menampung array yang akan di loop. Di dalam widget Blog, Anda dapat mengulang data:posts Karena elemen b:loop bukan tag HTML biasa, Anda tidak perlu memanggil sebuah expression untuk mereferensikan data.

Atribut lain untuk b:loop adalah var. Var akan menjadi kata kunci yang akan merujuk pada apa yang ada di dalam loop untuk meminta elemen saat ini selama di loop.

<b:section class="sidebar" id="sidebar" showaddelement="yes" growth="vertical">
	<b:widget type="PageList" id="PageList" locked="no">
		<b:includable id="main">
			<ul>
				<b:loop var="item" values="data:links">
					<li>
						<a expr:href="data:item.links.target"><data:item.title /></a>
					</li>
				</b:loop>
			</ul>
		</b:includable>
	</b:widget>
</b:section>

<b:section class="main" id="main" showaddelement="no" growth="vertical">
	<b:widget type="Blog" id="Blog1" locked="yes">
		<b:includable id="main">
			<b:loop var="item" values="data:posts">
				<b:include name="post" data="item" />
			</b:loop>
		</b:includable>
		<b:includable id="post" var="post">
			<div>
				Title: <data:post.title />
			</div>
		</b:includable>
	</b:widget>
</b:section>

Mengenal tag b:if dan b:else

Kita juga dapat memiliki pernyataan if / else di Tema Blogger menggunakan tag XML b:if dan b:else. Tag b:if memiliki satu atribut kondisi yang merupakan sebuah query atau kondisi pernyataan if. Di dalam kondisi dapat membandingkan nilai menggunakan ==, !=,  >=,  <=,  >, dan  <. Jika kita membandingkan variabel data dengan tipe data string, string tersebut harus dibungkus dengan tanda kutip ganda. Kita akan sering menggunakan tanda kutip ganda ke Entitas HTML dari sebuah kutipan alih-alih teks ascii dari sebuah kutipan. Selain itu, simbol yang lebih besar dari dan yang lebih kecil perlu dikodekan html juga karena XML tidak mengizinkan simbol tersebut di dalam atribut.

<b:if cond='data:blog.pageType == "item"'>
	<div>Page Type: Item</div>
<b:else />
	<div>Page Type: Else</div>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
	<div>Home Page: False</div>
<b:else />
	<div>Home Page: True</div>
</b:if>

<b:if cond='data:blog.isMobileRequest'>
	<div>Mobile: True</div>
<b:else />
	<div>Mobile: False</div>
</b:if>

Mengenal tag b:skin

Semua style dan variable dapat kita definisikan dalam tag b:skin, yang kita letakan di tag head dokumen. Data di dalam b:skin harus berupa CDATA dan tidak boleh berupa tag style html biasa.

Di dalam CDATA kita dapat menempatkan semua style CSS untuk halaman tersebut. Kita juga dapat memuat CSS eksternal dengan menggunakan tag tautan di luar tag skin.

Sebelum menuliskan style CSS, di dalam CDATA, kita dapat membuat komentar CSS /* komentar */ yang mendefinisikan variabel yang dapat diubah pengguna di editor template Blogger. Variabel-variabel ini akan mengatur jenis variabel, nilai, nilai default, nama variabel, deskripsi variabel, dan varian dari variabel tersebut.

Untuk mengatur tema warna varian, kita harus memiliki variabel yang bernama "keycolor". Jika kita tidak memiliki variabel ini, varian tidak akan muncul di tab penyesuaian "Latar Belakang" di Blogger dashboard.

Variable atribut

• name: Nama atribut yang kemudian  akan digunakan untuk referensi nilai variabel. Kita dapat mereferensikan nama dengan menambahkan $(name) di dalam deklarasi style kita.
• description: Deskripsi atau judul tentang elemen yang akan diubah. Hanya muncul di dalam setelan warna Blogger. 
• type:  Jenis variabel yang akan ditetapkan. Bisa berupa font atau warna. Dikabarkan ada lebih banyak tetapi tidak ada dokumentasi atau kode tersembunyi untuk menunjukkan sebaliknya.
• default:  Nilai default untuk variabel. Jika nilainya tidak disetel atau pengguna menyetel ulang semua variabel, warna akan menjadi seperti ini.
• value: Nilai variabel. Harus dihilangkan atau disetel ke nilai default saat merilis atau menerbitkan tema Anda sehingga pengguna akhir akan mendapatkan nilai sebenarnya.
• variants: Daftar varian yang dipisahkan koma untuk berbagai tema/skema warna.  

Groups

Selain variabel, kita juga dapat menempatkan variabel di dalam tag Grup yang akan meng-hightlight bagian halaman tempat kita mengedit dan mengelompokkan beberapa variabel menjadi satu. Grup memiliki dua atribut, description dan selector. Description adalah apa yang menjelaskan kepada pengguna apa yang mereka edit, seperti Judul Blog atau Tautan Posting. Selector akan memberi tahu Blogger bagian halaman mana yang akan disorot untuk memberikan representasi visual kepada pengguna tentang apa yang sedang mereka edit.

<b:skin>
	<![CDATA[
		/*
			<Variable name="keycolor" description="Theme KeyColor" type="color" default="#eeeeee" variants="#ff0000,#00ff00" />
			<Variable name="siteFont" description="Font Style" type="font" default="14px 'Open Sans',sans-serif" />
			<Variable name="siteBackground" description="Background" type="color" default="#eeeeee" variants="#ff0000,#00ff00" />
			<Group description="Navigation" selector="#navigation">
				<Variable name="navigationBackground" description="Background" type="color" default="#c14545" />
				<Variable name="navigationFont" description="Font Style" type="font" default="18px 'Open Sans',sans-serif" />
				<Variable name="navigationFontColor" description="Font Color" type="color" default="#ffffff" />
			</Group>
		*/
		* {
			padding: 0px;
			margin: 0px;
		}
		body {
			background: $(siteBackground);
			font: $(siteFont);
		}
		#navigation {
			color: $(navigationFontColor);
			font: $(navigationFont);
			background: $(navigationBackground);
		}
	]]>
</b:skin>

Berikut adalah tags dasar yang terdapat dalam XML blogger. Dengan memahami hal dasar ini, kita dapat membuat tema custom untuk blogger.

Semoga pembaca suka dengan artikel ini, jangan sungkan untuk menghubungi kami melalui media sosial kami. Tetap ikuti blog ini untuk tetap mendapatkan artikel menari kalinnya, semoga suka dan bermanfaat. Terima kasih.