Membaca Bahasa XML Template Blogspot

Saya ingin membuat template untuk blogspot, bagaimana caranya?” kalimat sejenis ini banyak sekali saya terima via email sejak memposting tulisan Membuat template blogspot secara offline berikut postingan selanjutnya yang berkaitan. Sebenarnya ingin sekali membuat tutorial membuat template, tapi sayang sekali terlalu berat materinya, dan peminatnya sedikit. Apalagi tanpa membuat sendiri sekalipun sudah banyak template blogspot gratis yang disediakan oleh banyak blog, situs dan kawan-kawan blogger lainnya.

Hanya ingin memberikan sedikit pengertian tentang cara memahami (mengerti bahasa) dari kode yang ada ditemplate blogspot agar bisa digunakan untuk mengedit template kawan-kawan. Untuk mengubah total tentu saja akan sulit bagi yang belum terbiasa, tapi kalau hanya sedikit-sedikit masih mudah kok dipahami.

OK mari kita mulai saja.

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>. Untuk yang belum tahu apa itu CSS baca Tutorial CSS (Sebuah Pengantar).

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’>▼ </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;’>

<b:else/>

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

KALAU MALAH FASILITASNYA HILANG LALU APA FUNGSINYA DILAKUKAN?

Hehe… kalau tidak ada fungsinya masa saya bahas. Pertama template bisa menghemat waktu load, karena query yang diminta tanpa banyak syarat. Kedua yang paling penting adalah pemindahan letak pada model template dengan cara dipaksakan, dimana jika kita pasang kode panjang lengkap diatas, selain tidak sesuai keinginan juga seringkali ditolak alias error. Selain itu pada pembuatan CSS yang dan javascript yang rumit untuk diintegrasikan dengan kode diatas agar otomatis, maka banyak kode standart yang saya buang. Saya hanya menggunakan bahasa khusus yang memanggil data saja dari databasenya, sedangkan kode lain saya buat sendiri.

Tentu saja postingan tidak akan membuat Anda paham dan bisa, paling tidak sebagai pengetahuan atau sebagai pemicu untuk mempelajari bahasa template blogspot. Intinya adalah agar otomatis. Sebagai contoh nyata silahkan Anda klik disini, dan perhatikan bagaimana pada tampilan label yang dipilih (pada tampilan menu), silahkan coba untuk label lainnya. Semua menjadi otomatis sesuai syarat dari sebuah kondisi yang saya tentukan. Itu adalah contoh sederhana saja berkaitan dengan sebuah tampilan menu, pada beberapa kasus bahkan lebih rumit karena otomatisasinya digabung dengan sebuah cara kerja script tertentu, karena ide ini lahir dari pembuatan template wordpress yang otomatis dengan bahasa PHP. Pengetahuan ini mutlak harus dikuasai jika Anda ingin melakukan Integrasi wodpress dan blogspot.

Adakah hubungannya teknik ini dengan SEO? hihihihi… silahkan pikirkan sendiri, yang jelas ada hubungannya untuk sebuah otomatisasi keywords, tentu saja kalau sudah menguasai dan mampu membaca bahasa XML template, kalau hanya bisa membaca widget archives seperti diatas pasti tidak bisa dikaitkan dengan sebuah teknik SEO onpage. Selamat pusing-pusing ria ……..

  • Trackback are closed
  • Komentar (0)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: