Cara menampilkan widget di halaman tertentu

Maksud dari menampilkan widget di halaman tertentu adalah, menyembunyikan widget di halaman-halaman blog dan menampilkannya di halaman lain. Lalu apa kegunaannya? dengan menampilkan widget di halaman tertentu maka bisa membuat loading blog anda menjadi lumayan cepat dan tampilan blog anda pun menjadi minimalis karena tidak terlalu banyak widget yang tampil secara berbarengan di suatu halaman.

Sebagai contoh, anda mempunyai widget chat box atau shoutbox namun anda hanya ingin menampilkannya di halaman homepage blog anda dan hanya tidak ingin menampilkannya di halaman artikel saja. Maka anda bisa menggunakan tips dari saya ini.

Pertama-tama cari dulu kode dari widget yang akan ditampilkan dihalaman tertentu, caranya mudah saja, yaitu ke Rancangan - Edit HTML - Expand Template Widget. Lalu gunakan CTRL + F untuk memudahkan pencarian. Setelah itu ketikan judul dari widget yang anda cari di menu find, kita ambil contoh widget chat box.

Mungkin kode nya tidak akan sama karena tergantung template nya juga tapi itu tidak masalah yang terpenting sudah ketemu kode nya. Ini contoh kode dari CHAT BOX :

<b:widget id='HTML6' locked='false' title='Chat Box' type='HTML'>

<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

</b:includable>
</b:widget>

Setelah itu, tambahkan kedua kode ini ke dalam kode widget yang ingin anda tampilkan di halaman tertentu. Saya ambil contoh untuk hanya menampilkan widget tersebut di halaman homepage saja sehingga di halaman artikel atau archive widget itu tidak akan tampil.

<b:if cond='data:blog.pageType == "index"'>

</b:if>

 Tambahkan kedua kode tersebut dibawah <b:includable id='main'> dan </b:if>,sehingga menjadi seperti ini :

<b:widget id='HTML6' locked='false' title='Chat Box' type='HTML'>

<b:includable id='main'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>  </div></b:if>
</b:includable>
</b:widget>

Setelah itu, simpan template dan sekarang widget tadi hanya akan tampil di halaman home page saja. Untuk widget lain pun sama,mungkin yang berbeda adalah kode widget nya saja.Seperti widget komentar terakhir di blog ini, kode nya seperti ini.

<b:widget id='HTML1' locked='false' title='Komentar Terakhir' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Jadi kalau saya ingin menampilkannya hanya di halaman homepage saja, seperti widget chat box tadi, sisipkan kode tadi ke dalam kode widget komentar terakhir. Sehingga menjadi seperti ini :

<b:widget id='HTML1' locked='false' title='Komentar Terakhir' type='HTML'>
<b:includable id='main'>

 <b:if cond='data:blog.pageType == "index"'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

 Intinya adalah menyisipkan kode yang berwarna hijau ke dalam kode widget anda.


Keterangan :

• Kode <b:if cond='data:blog.pageType == "index"'> berfungsi untuk menampilkan widget di  homepage saja (halaman depan).
• Kode </b:if> adalah sebagai penutup dari kode diatas.
• Jika anda ingin menampilkan widget hanya pada halaman artikel atau archive,anda tinggal mengganti kode <b:if cond='data:blog.pageType == "index"'> dengan kode dibawah ini.

Menampilkan widget di halaman artikel saja : 

<b:if cond='data:blog.pageType == "item"'>

 Menampilkan widget di halaman archive saja : 

<b:if cond='data:blog.pageType == "archive"'>

Lihat Juga Artikel Lainnya!: