Terbaru

Home / Ngeblog / Tips / Menampilkan Widget/Gadget pada Halaman Tertentu

Menampilkan Widget/Gadget pada Halaman Tertentu

November 08, 2014 ,
Jika saudara menginginkan widget atau gadget tampil pada halaman tertentu saja dari blog anda, maka itu bisa diatur dengan kode fungsi b:if. Salah satu contoh widget yang diatur hanya tampil pada halaman tertentu saja, bisa dilihat di homepage blog ini.... Di atas posting artikel ada satu artikel panjang yang sebenarnya adalah sebuah gadget HTML yang diatur hanya muncul pada halaman depan saja.

Sebenarnya fungsi b:if itu adalah fungsi kondisional yang bisa saudara gunakan pada blogspot. Dengan menggunakan fungsi ini kita bisa mengatur widget apa saja yang ditampilkan pada suatu halaman, tergantung tipe dari halaman tersebut. Saudara bisa mengatur agar widget atau gadget itu untuk ditampilkan pada 5 type halaman berbeda, yaitu:
  • Homepage atau Beranda
  • Halaman Posting Artikel
  • Halaman Laman Statis
  • Halaman Arsip
  • Halaman Artikel tertentu
Untuk melakukan ini saudara cukup mengikuti langkah-langkah sederhana berikut ini:

Cari ID dari Widget Yang Ingin Dibatasi Tampil Pada Halaman Tertentu

  • Untuk melakukan ini saudara bisa masuk ke menu TATA LETAK.
  • Klik EDIT pada gadget yang ingin dibatasi
  • Pada saat saudara mengklik EDIT pada widget lama akan terlihat ID dari widget tersebut PADA BAGIAN AKHIR URL (lihat gambar di bawah ini)
tampilan edit HTML JAVASCRIPT gadget blog
  • Dari contoh di atas kita bisa lihat bahwa ID pada akhir URL adalah HTML7.... tentu saja ID pada akhir URL saudara bisa saja berbeda....

Berikan Perintah Kondisi b:if Pada Gadget atau Widget 

  • Setelah saudara mendapatkan ID dari widget tersebut, sekarang masuk ke menu TEMPLATE
  • Klik tombol EDIT HTML dan setelah itu LANJUTKAN
  • Silahkan centang EXPAND TEMPLATE WIDGET
  • Setelah itu tekan Ctrl+F pada browser saudara
  • Nanti akan muncul kotak pencarian, silahkan ketikkan ID yang tadi didapatkan (contoh lihat gambar)
Tampilan EDIT HTML TEMPLATE untuk widget

Setelah saudara menemukan kode seperti di atas, saatnya menyisipkan kode b:if pada kode di atas. Kode b:if yang saudara sisipkan tergantung pada type halaman yang saudara targetkan untuk menampilkan widget tersebut. Jadi ikuti salah satu panduan di bawah ini....

PERHATIAN...
Perhatikan baik-baik posisi kode b:if di dalam kode widget....
kode <b:if... selalu tepat di bawah  <b:includable id='main'>
sedangkan kode penutup </b:if> selalu tepat di atas  </b:includable>

Menampilkan Widget Pada Halaman Homepage Saja

Bentuk kode b:if yang bisa saudara gunakan adalah seperti contoh di bawah ini:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
Kode Yang Dibatasi.... 
</b:if> 

Contoh setelah kodenya diterapkan....

<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman KECUALI pada Homepage

Cukup ubah kode <b:if cond='data:blog.url == data:blog.homepageUrl'>
menjadi <b:if cond='data:blog.url != data:blog.homepageUrl'>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman Posting Artikel

Bentuk kode b:if yang bisa saudara gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond='data:blog.pageType == "item"'>
Kode Yang Dibatasi.... 
</b:if> 

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman KECUALI halaman Posting Artikel

Cukup ubah kode <b:if cond='data:blog.pageType == "item"'>
menjadi <b:if cond='data:blog.pageType != "item"'>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Laman Statis

Bentuk kode b:if yang bisa saudara gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond='data:blog.pageType == "static_page"'>
Kode Yang Dibatasi.... 
</b:if> 

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman KECUALI pada Laman Statis

Cukup ubah kode <b:if cond='data:blog.pageType == "static_page"'>
menjadi <b:if cond='data:blog.pageType != "static_page"'>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman Arsip

Bentuk kode b:if yang bisa saudara gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond='data:blog.pageType == "archive"'>
Kode Yang Dibatasi.... 
</b:if> 

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman KECUALI pada Halaman Arsip

Cukup ubah kode <b:if cond='data:blog.pageType == "archive"'>
menjadi <b:if cond='data:blog.pageType != "archive"'>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya diterapkan....
<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;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget Hanya Pada Satu Halaman Tertentu

Bentuk kode b:if yang bisa saudara gunakan untuk membatasi widget hanya tampil pada halaman artikel saja adalah seperti contoh di bawah ini:

<b:if cond='data:blog.url == "URL Halaman di sini"'>
Kode Yang Dibatasi.... 
</b:if> 

Contoh setelah kodenya diterapkan....
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL Halaman di sini"'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

JIKA SUDAH SIMPAN PERUBAHAN

Menampilkan Widget di Semua Halaman KECUALI satu URL tertentu

Cukup ubah kode <b:if cond='data:blog.url == "URL Halaman di sini"'>
menjadi <b:if cond='data:blog.url != "URL Halaman di sini"'>

Perhatikan tanda == berubah menjadi !=

Contoh setelah kodenya diterapkan....
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL Halaman di sini"'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


JIKA SUDAH SIMPAN PERUBAHAN
===========================

Cara ini sebenarnya bisa diterapkan bukan hanya pada widget saja, tapi juga pada CSS, dan HTML dan Script tambahan di luar widget. Tapi itu nanti saja dibahasnya di artikel lain. Mudah-mudahan cara menampilkan widget pada halaman tertentu ini bisa membantu saudara. Jika ada masalah silahkan disampaikan lewat komentar di bawah. Terima kasih sudah mau mampir sobat blogger sekalian....

Tidak ada komentar

Langganan: Posting Komentar ( Atom )