Selasa, 07 Januari 2014

Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional - Sobat blogger dan good People , begitu bermanfaat tag kondisional dalam blogger template tapi sayangnya saya jarang menemukan artikel tentang tag kondisional ini dan kebanyakan judulnya Cara menyembunyikan widget di Homepage atau Membuat Widget Hanya tampil di Halaman Posting tapi sangat sedikit yang bilang kalo itu menggunakan tag kondisional, sebelum melanjutkan membaca tutorial ini bagi sobat yang belum paham tentang Tag Kondisional ini bisa baca dahulu artikel tentang tag kondisional yang sudah saya tulis disini :

Baca Dulu :

TAG KONDISIONAL LENGKAP DAN CARA MENGGUNAKANNYA
- MEMBUAT HALAMAN HOME, POSTING , STATIS BERBEDA DENGAN TAG KONDISIONAL


Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional
Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional


Nah Jika sobat sudah mulai paham dengan Tag Kondisional mari kita sama sama bahas tentang tag ini dengan judul Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional.

Sebagai Demo Coba bisa dilihat pada Gambar :

Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional
Widget Ruang Ngopi Yang hanya tampil di Homepage dan Halaman Index

Menyembunyikan dan Menampilkan Widget Hanya Dengan Tag Kondisional
Widget Yang Hanya tampil di Halaman Posting


Penerapan Tag Kondisional Pada Blogger


1. Cari Nama/ Judul Widget Sobat atau sebagai Contoh saya gunakan Widget dengan judul 'Ruang Ngopi' pada blog ini
2. Lalu Cari Nama Judul Widgetnya pada HTML Editor di Blogger
3. Jika Sudah Ketemu Lalu Perhatikan Kode berikut :

<b:widget id='HTML4' locked='false' title='Ruang Ngopi' type='HTML'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>  <!-- 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>

4. Yang Harus anda Tambahkan Hanya Tag Kondisional Yang sudah Saya beri warna Merah Pada Kode diatas

Info :

Kenapa Pake tag Kondisional Halaman Index ? Karena (Menurut Saya Agar pada Halaman Search Label di Homepage Widget tetap ada Contohnya Halaman Ini :

http://www.labeltutorial.com/search?updated-max=2013-12-26T01%3A19%3A00%2B07%3A00&max-results=7

Atau ini

http://www.labeltutorial.com/search



Cara Menampilkan Widget Dengan tag Kondisional Lainnya :


Widget hanya Tampil di Halaman Posting

<b:widget id='HTML4' locked='false' title='Ruang Ngopi' type='HTML'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>  <!-- 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>

Widget hanya Tampil Dihalaman Statis

<b:widget id='HTML4' locked='false' title='Ruang Ngopi' type='HTML'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  <!-- 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>

Widget Hanya Tampil Dihalaman Terntentu

<b:widget id='HTML4' locked='false' title='Ruang Ngopi' type='HTML'>
 <b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>  <!-- 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>

Cara Menampilkan Hanya Satu Widget saja yang tampil di Homepage


Walaupun Gak ada yang nanya gapapa Sekalian saya jelasin kalo untuk hanya menampilkan satu widget saja pada homepage

1. Sobat harus tau ID Pada Widget yang ingin tidak di tampilkan 

Caranya Pergi Ke Tata Letak lalu Klik Edit Pada Widget yang ingin di liat IDnya lihat pada URLnya di Jendela Widgetnya ,Diketahui Class ID widgetnya HTML4 Lihat gambar :



2. Nah jika sudah tau ID pada Widgetnya sekarang kita pakai CSSnya untuk Diterapkan pakai Tag Kondisional , Simpan Kode ini untuk tidak menampilkan Widget pada Homepage di Bawah Kode </b:skin> atau </style>

<style>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
#HTML2 ,#HTML3 ,#HTML5 {display: none;}
</b:if>
</style>

Info :
Kode Diatas Artinya Widget yang Id Classnya  #HTML2 ,#HTML3 ,#HTML5 tidak ditampilkan di Homepage

Widget Tetap Terbaca di Browser dan Membuat Homepage Berat


Walaupun gak ada lagi yang nanya ini tapi gapapa lagi karna mungkin nanti akan ada yang bertanya tentang ini. Memang meskipun Widget tidak tampil di Homepage widget tersebut tetapi tetap terbaca oleh browser , nah cara mengatasi widgetnya supaya agar tidak terbaca oleh browser gimana caranya ??

Saya Ambil contoh widget yang memberatkan blog adalah widget dengan ID class HTML5, tambahkan tag Kondisional Pengingkaran widget ini (Warna Merah), kode nya seperti ini :

<b:widget id='HTML5' locked='false' title='' type='HTML'>
            <b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'><b:if cond='data:blog.pageType != &quot;index&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>              <!-- 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:if></b:if>            </b:includable>
          </b:widget>


Info :
Arti Kode diatas adalah Widget dengan ID class HTML5 tidak akan tampil dan tidak akan terbaca oleh browser pada halaman Homepage ,Index dan Halaman Statis

Nah Itu dia Pembahasan Lebih Lanjut Fungsi dan Kegunakan serta Penerapan tag Kondisional pada Blogger , Masih Binggung ? Kalo Masih Bingung Bisa Sobat Tanyakan Keluh dan Kesahnya di Form Komentar dibawah . terima kasih Salam Labeltutoria.com

Author : +Asep Septian 

Tagged: ,