Belajar XML Template Blogspot

Semua template blogspot terdiri dari bagian-bagian yang selalu mencakup halaman HTML sempurna yaitu bagian header dan body, bagian header juga berisi kode HTML yang standar, maksudnya bisa diisi sama dengan bagian HTML umumnya, Demikian pula dengan bagian body. Beberapa yang perlu diperhatikan paling dulu adalah sebagai berikut:
CSS
Bagian CSS (Cascading Style Sheet) pada blogspot secara standar langsung diintegrasikan dan ditulis langsung pada bagian header template dan selalu dimulai dari kode <b:skin><![CDATA[ dan diakhiri dengan kode ]]></b:skin>.
Isi Body
Body berisi keseluruhan dari halaman yang akan ditampilkan saat blog dibuka dengan browser. Beberapa ID dan Class untuk CSS biasanya berlainan tiap template, karena nama variabel tersebut dibuat sekehendak hati pembuat template, tapi ada bahasa tertentu yang pasti ada disebuah template, karena kode tersebut berkaitan dengan kode dasar atau perintah pemanggilan data pada database blogspot. Nah kode inilah yang harus kita pahami, bukan variabel atai nama-nama Class dan ID dari pembuat template.
Dengan mengerti maksud dari barisa kode, kita bisa membuat macam-macam model dan atau memangkas kode yang tidak perlu agar load terhadap database (query) bisa lebih singkat. Sebagai contoh saja saya gunakan pada kode widget "Arsip (Archive)". Kode standarnya kalau kita memasang widget ini adalah seperti dibawah ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
Wow panjang sekali ya kodenya? capek deh membacanya. Saya tidak akan membahas semuanya karena panjang sekali, dan Anda bisa belajar sendiri dengan coba-coba, kemudian melihat hasilnya baru menyimpulkan. Sebagai permulaan saya akan mebaca sebagian kode untuk nama widget, yaitu bagian kode yang dibawah ini:
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
Kode diatas ada dibagian kode berwarna biru. Membaca kode diatas jika dibahasakan kedalam bahasa manusia bisa diartikan "Jika widget memiliki nama maka tampilkan nama dengan kode <h2>Nama Widget</h2>". Jika ternyata nama widget dikosongi maka nama widget tidak akan ditampilkan termasuk kode <h2> juga tidak akan ditampilkan. Perhatikan kode <b:if cond='data:title'>. b:if bisa diartikan syarat (jika) dan cond adalah sebuah kondisi yang harus terpenuhi.
Kalau dari kode pendek saja penjelasannya panjang bagaimana mungkin saya jelaskan semua kode diatas? bisa keriting jari saya nanti. Barisan kode panjang diatas itu memiliki kode perintah utama, perintah pendukung dan sub perintah pendukung. Perintah utama adalah yang berwarna biru dan yang warna lainnya adalah perintah pendukung yang akan dilakukan saat salah satu opsi perintah utama dipilih. Perintah utama adalah kode dibawah ini:
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
Jika dibahasakan: Jika opsi HIERARCHY dipilih maka ambil perintah interval, jika opsi FLAT dipilih maka ambil perintah flat, jika opsi MENU dipilih maka ambil perintah menu.
Perintah menu-menu ada dibagian yang memiliki warna-warna lain dibawahnya.
Saya sendiri tidak pernah memakai kode lengkap seperti diatas, karena malah membingungkan saya karena panjangnya kode. Selain itu jika ingin membuat template yang "aneh" dan dipaksakan, maka seringkali kode diatas tidak bisa digunakan, harus memanggil dalam bahasa berbeda agar sesuai keinginan. Ini saya lakukan pada banyak kasus berbeda. Sebagai contoh jika saya hanya ingin menampilkan arsip dalam bentuk flat (biasa), maka saya akan mengambil kode untuk flatnya saja tanpa menyertakan yang lain. Sehingga kode menjadi seperti dibawah ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:include data='data' name='flat'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
Bahkan tanpa variabel pendukung bisa langsung seperti kode dibawah ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Setelah melakukan pemotongan kode ini maka fasilitas opsi di elemen halaman tidak berfungsi lagi. Meskipun opsi masih akan tampak, tapi tidak akan memiliki efek. Misal memilih tampilan menu (menu dropdown) maka tetap saja hasilnya akan berupa kode flat dengan kode ul (unordered list).

Sumber : www.ateonsoft.com

9:43 PM | Labels: |

This entry was posted on 9:43 PM and is filed under Template Blogger . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)