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

Berlangganan update artikel terbaru via email:

4 Responses to "Cara Menampilkan Widget di Halaman Tertentu"

  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
  3. 100%TERPERCAYA TOKO ONLINE RESMI BUKAN PENIPUAN DI DELIMA PONSEL 100% KAMI JAMIN UANGX KAMI KEMBALIKAN APA BILA BARANGX TIDAK SAMPAI DALAN JANGKA 2 HARI ATAU KUNJUNGI WEBSITE RESMI KAMI DI http://delima-ponsel.blogspot.com
    PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
    Ready Stock ! Apple iphone 5 32GB Rp.3.000.000,-
    Ready Stock ! Apple iPhone 5S 32GB Rp.4.000.000,-
    Ready Stock ! Apple iPhone 6 plus 32gb Rp.5.500.000,-
    Ready Stock ! Samsung Galaxy S5 Rp.2.500.000
    Ready Stock ! Samsung Galaxy S6 32GB Putih Rp.3.700.000
    Ready Stock ! Samsung Galaxy S4 I9500 Putih Rp.2.200.000
    Ready Stock ! Samsung Galaxy Note 3 PUTIH Rp.3.000.000
    Ready Stock ! Samsung Galaxy Note 4 SM-N910H Gold Rp.3.500.000,-
    Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.2.000.000
    Ready Stock ! Samsung Galaxy A5 A500F Silver Rp. 2.500.000,-
    Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.700.000
    Ready Stock ! Samsung Galaxy E7 E700H Putih Rp. 1.900.000,-
    Ready Stock ! Apple iPhone 4 16GB - Black Rp.1.800.000,-
    Ready Stock ! Apple iPhone 4S 16GB (dari Telkomsel) Rp.2.200.000,-
    Ready Stock ! Samsung Galaxy Grand Prime SM-530H Rp.1.200.000
    Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4GB-64GB Rp.2.700.000,

    ReplyDelete
  4. If you are looking for a solid contextual advertising network, I suggest you take a look at Clicksor.

    ReplyDelete

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.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel