Cara Menampilkan Widget di Halaman Tertentu

Salah satu elemen utama dalam halaman sebuah blog adalah Widget/Gadget. Tapi seringkali kita dipusingkan dengan banyaknya pilihan dan keperluan. Oleh sebab itu saya akan memberikan info cara menampilkan widget di halaman tertentu saja, sesuai dengan keinginan dan pilihan kita.

Kenapa tampilan widget dipisah-pisah? Kenapa tidak dibiarkan tampil di semua halaman? Dan apa gunanya?

Kita kenalan dulu sama Mr. Widget ya sob. Singkat cerita nih, Widget merupakan fitur berupa aplikasi dengan kode portabel (DHTML, JavaSript atau Adobe Flash) yang dipasangkan pada halaman web atau blog dan menjadi bagian web tersebut serta untuk fungsi tertentu. Dapat diletakkan di bagian-bagian selain kolom posting (Header, Sidebar dan Footer).

Fungsi dari widget pun sangat banyak, contohnya untuk mempercantik tampilan web atau blog, memudahkan pengunjung mencari informasi tentang konten blog, memudahkan pemilik blog memantau blog, memberikan sesuatu (Widget musik, video dll) dengan tujuan pengunjung bisa lebih betah membuka blog dan fungsi-fungsi lainnya.

Tetapi kemudian timbul permasalahan ketika kita pasang semua widget yag kita perlukan, bukannya nilai plus yang kita dapatkan. Loading blog semakin berat apalagi pada versi mobile (menjadi kurang user friedly kan?), tampilan menjadi kurang sedap karena kebanyakan widget serta membuat user bingung dengan tampilan yang terlalu banyak.

Sebenarnya tidak ada salahnya Sobat memasang berbagai Widget pada blog, karena mungkin sobat memang memerlukannya. Tetapi sobat harus bisa mengatur bagaimana widget-widget tersebut tidak memberikan masalah baru bagi blog Sobat. Disinilah tutorial yang akan saya berikan menjadi berguna bagi blog sobat.

Simak dengan teliti ya Sob

Cara ini menggunakan Conditional Tags (b if) untuk menampilkan widget di halaman tertentu dan menyembunyikannya di halaman-halaman yang lain. Penggunaannya langsung pada elemen yang hendak diberi perintah, yaitu elemen Widget (dalam hal ini).

Jadi yang pertama kali kita lakukan adalah mencari ID Widget yang akan kita berikan perintah Conditional Tags ini. Caranya sangat mudah kok Sob.

Mencari ID Widget (Ada 2 cara yang mudah)

1. Login ke akun Blogger Sobat
  • Buka menu Tata Letak atau Layout
  • Pilih Widget yang sobat kehendaki, klik Edit
  • Akan muncul jendela pop up, lihat pada bagian URL pada pop up window dan ID Widget terletak di bagian akhir URL (geser URL ke kanan).

2. Login ke akun Blogger Sobat
  • Klik Lihat blog pada bagian atas halaman administrasi blog
  • Klik ikon Widget Editor pada Widget yang sobat pilih (gambar tang dan obeng)
  • Lakukan kalanjutannya seperti pada cara 1
http://kendhou.blogspot.co.id/2015/12/cara-menampilkan-widget.html

Sekarang simpan ID Widget yang sobat dapat, kita menuju tahap selanjutnya.

Memasukkan Conditional Tags pada elemen widget

http://kendhou.blogspot.co.id/2015/12/cara-menampilkan-widget.html
Elemen Widget

  1. Login ke akun blogger
  2. Pilih menu Template > Edit HTML
  3. Buka kolom pencarian (Ctrl+F), ketikkan ID Widget yang sobat simpan.
  4. Tambahkan Conditional Tags setelah kode <b:includable id='main'> dan jangan lupa memberikan Tags penutup sebelum kode </b:includable>
  5. Masukkan Conditional Tags yang berwarna biru pada beberapa opsi di bawah ini.

A. Menampilkan Widget hanya di Halaman Utama/Home Page

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- 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:if>
</b:includable>
</b:widget>


B. Menampilkan Widget hanya di Halaman Postingan

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- 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:if>
</b:includable>
</b:widget>

C. Menampilkan Widget hanya di halaman statis

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
  <!-- 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:if>
</b:includable>
</b:widget>

D. Menampilkan Widget hanya di halaman Arsip (Archive)

 <b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- 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:if>
</b:includable>
</b:widget>

E. Menampilkan Widget hanya di satu halaman tertentu (berdasarkan URL)

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Isi URL halaman disini"'>
  <!-- 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:if>
</b:includable>
</b:widget>

Setelah selesai memasukkan Conditional Tags, pilih Simpan template.

Conditional Tags ini sangat berguna ketika sobat ingin menghilangkan beberapa widget dari halaman tertentu contohnya halaman posting dan hanya tampil di halaman homepage,  tujuannya loading menjadi lebih ringan ketika pengunjung membuka artikel sobat.

Bisa juga untuk memilih iklan mana yang tampil di Home page dan mana yang hanya tampil di Halaman Posting dan lain-lain (Bagi pemilik akun Google Adsense). Seperti yang saya terapkan pada blog kecil ini, sehingga saya bisa melakukan pemasangan iklan yang berbeda untuk setiap halaman yang saya inginkan.

Dan akhirnya, saya harus menutup informasi ini. Tetapi sebelum itu saya ingin mengucapkan terima kasih kepada Ahmad Khoirul Azmi dengan blog buka-rahasianya yang memberikan pencerahan kepada saya tentang hal ini. Semoga bermanfaat...
Salam Pintar...

Comments

  1. Terima kasih ulasannya Bang, semoga artikel ini semakin dicari para pembaca. Amin...

    Salam kenal,

    ReplyDelete
  2. Amin... Terima kasih kembali dah mau kunjung di blog kecil ini
    Dan salam kenal juga

    ReplyDelete

Post a Comment

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Popular posts from this blog

Cara stel timing Pompa Injeksi Diesel

Trik setting mesin diesel kurang kering

Menambah tenaga Isuzu Elf