Mengenal Atribut expr Pada Template Blogger

Bila kita membuka template blogger, maka akan tampil banyak ekali script yang terkadang membuat orang awam bingung. Pada kode tempalte blogger tersebut banyak sekali atribut html yang digunakan dan salah satu atribut yang paling banyak digunakan adalah atribut expr:.

Template blogger adalah dokumen xhtml yang dirender berdasarkan variabel. Tutorial ini bertujuan untuk membantu memahami kode yang ada di template blogger. Template Blogger pada dasarnya memiliki tiga jenis variabel, diantaranya adalah:

• Variabel yang mengontrol aliran kode.
• Variabel yang mengambil data dari database,
• dan yang ketiga adalah variabel ekspresi.

Semua variabel ini kemudian dibedakan dengan bantuan namespace xml. Pada artikel ini kami akan menjelaskan template blogger yang berkaitan dengan penjelasan expr: namespace dan pemahaman penggunaannya.

expr - digunakan untuk menghitung nilai ekspresi dan tag. Ini dapat digunakan untuk menentukan nilai dalam data dari data.

expr: atribut adalah awalan yang diberikan pada Atribut Tag HTML, dengan memberikan atribut ini akan memungkinkan Tag HTML menggunakan Ekspresi Blogger. Lalu apa itu Ekspresi Blogger, secara umum Ekspresi Blogger dapat di jelaskan sebagai kode khusus Blogger yang harus dimasukkan ke dalam nilai atribut tag HTML.

Namespace Expr sangat sederhana tetapi penggunaannya sangat penting. Expr pada dasarnya digunakan bersama dengan tag data. Untuk memberitahukan mesin blogger bahwa atribut tag xml berikutnya memiliki tag data di dalamnya dan harus diuraikan.

Setiap kali ada tag, katakanlah "anchor tag", anda pasti akan memiliki atribut seperti href dan dalam hal ini anda ingin tautan href dibuat secara dinamis dengan bantuan beberapa data, katakanlah data:post.url atau data:blog.homepageUrl.canonical, maka anda harus menggunakan href sebagai expr:href.

1. Implementasi Atribut expr:href

Untuk memahami penggunaan atribut expr, berikut ini kami berikan contoh script sederhana penggunaan expr:href  yang menyertakan judul (title) dan label dari blog anda.

<b:includable id='title'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <data:title/>
  <b:else/>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
 </b:if>
</b:includable>

Contoh lainnya dapat anda lihat seperti script di bawah ini.

<b:if cond='data:top.showPostLabels and data:post.labels'>
&#12539;<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a class='badge rounded-pill' expr:href='data:label.url' rel='tag' role='button'><data:label.name/></a>
</b:loop>
</b:if>

Lihat kode di bawah ini untuk memahami penerapan expr:src dan tag serupa lainnya. Ini digunakan untuk menguraikan tag data dalam atribut tag img gambar.

<a expr:href='data:blog.homepageUrl' style='display: block'>
 <img 
  expr:alt='data:title' 
  expr:height='data:height' 
  expr:id='data:widget.instanceId'
  expr:src='data:sourceUrl' 
  expr:width='data:width' 
  style='display: block'
 />
</a>

2. Membuat Tombol StumbleUpon Social Bookmar dengan expr

Daftar kode di bawah ini menjelaskan cara menyisipkan tombol StumbleUpon untuk template blogger. Pada contoh ini yang perlu anda perhatikan adalah pada penggunaan tanda kutip i expr. Jadi periksa bagaimana tanda kutip tunggal dan ganda digunakan dalam expr:href untuk membuat dan menggunakan url untuk mengirimkan dan/atau memberi jempol pada postingan tertentu dengan benar. Secara umum tidak masalah apakah anda menggunakan tanda kutip tunggal atau ganda, tetapi ketika atribut anda harus menggunakan kedua tanda kutip tersebut. Tanda kutip tunggal memerlukan atribut pembuka dan penutup dan tanda kutip ganda dipahami sebagai bagian dari atribut.

Blogger menggunakan tanda kutip tunggal untuk nilai atribut, dan tanda kutip ganda di dalamnya, jadi ubahlah kode Anda seperlunya. Dalam nilai atribut, jika ada tanda kutip tunggal atau ganda tambahan sebagai bagian dari kode asli, misalnya Javascript, anda harus menghindarinya. Periksa juga apakah ampersand '&' diubah menjadi '&'. Jadi, Anda mungkin harus membuat url anda dengan cara ini. 

<a 
 rel="nofollow" 
 target="_blank" 
 expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' 
 title="StumbleUpon">
 <img 
  src="../stumbleupon.png" 
  title="StumbleUpon" 
  alt="StumbleUpon" 
  class="sociable-hovers"
 />
</a>

Selain tombol StumbleUpon. kami juga akan memberikan contoh cara menambahkan Digg ke Blogger. Sekali lagi meskipun daftar kode di bawah ini adalah contoh menambahkan Digg ke template Blogger, fokus kita di sini adalah cara menggunakan javascript. Periksa bagaimana data:post.url digunakan saat memasukkannya ke dalam variabel javascript digg_url. Anda dapat menggunakan kode ini untuk menampilkan penghitung penggalian yang dilakukan untuk postingan anda dengan rapi dan ringkas di blog anda.

<script type="text/javascript">
 digg_url = &#39;<data:post.url/>&#39;;
 digg_skin = 'compact';
 digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> 

Jadi seperti yang Anda lihat, pelepasan tanda kutip yang tepat dilakukan di atas. Meskipun ini bukan contoh langsung dari penggunaan tag expr: sebagai javascript onclick atau kejadian serupa lainnya tidak digunakan di sini.

<div class='post-footer-line post-footer-line-3'>
 <span class='post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:post.allowComments'>
    <a 
     class='comment-link' 
     expr:href='data:post.addCommentUrl' 
     expr:onclick='data:post.addCommentOnclick'>
      <b:if cond='data:post.numComments == 1'>
       1 <data:top.commentLabel/>
      <b:else/>
       <data:post.numComments/> <data:top.commentLabelPlural/>
      </b:if>
    </a>
   </b:if>
  </b:if>
 </span> 
</div>

Perhatikan script di atas, kode data:post.addCommentOnclick menghasilkan javascript yang sesuai berdasarkan pengaturan blog, misalnya jendela popup atau halaman posting komentar. Dan data:post.addCommentUrl akan menghasilkan url yang menunjuk ke komentar untuk postingan tersebut.