22 Oktober 2015

Cara Membuat Widget Terlihat Dihalaman Tertentu

Membuat widget hanya terlihat atau muncul dihalaman tertentu adalah solusi agar halaman blog anda terlihat rapi dan tidak terlalui ramai, jadi hanya menampilkan widget terpilih yang relevan dengan halaman blog anda. Dengan cara ini anda bisa mengatur tampil widget misalnya, widget terlihat hanya atau kecuali di halaman Homepage, Archive, Label & URL tertentu dan Static pages.

Step by Step Membuat Widget Terlihat atau Disembunyikan Di Halaman Tertentu


Tehnik ini menggunakan "<b:if>" conditional tag pada XML Blogger, yang berfungsi sebagai perintah agar widget akan muncul atau disembunyikan di halaman tertentu saja.

Cara Mencari Widget ID Template Blogger

Pertama kali yang anda lakukan adalah mencari ID widget yang anda mau kondisikan menggunakan conditional tag.

Klik "Layout" kemudian klik "edit" pada widget

Cara Mencari Widget ID Template Blogger


Arahkan / drag mouse sampai ketemu text "widgetid=" (2) pada kolom address kemudian catat ID widget tersebut. misalnya pada contoh gambar diatas, widget yang saya mau kondisikan dengan ID "HTML3". Atau anda bisa mencari elemen widget dengan isi dari title widget tersebut, misalnya "Artikel Terbaru" seperti gambar diatas.

Edit HTML Elemen Widget di Editor Template Blogger 

Setelah anda mendapatkan ID widget lanjut edit html template blogger anda, klik "Template >> Edit HTML". Tekan CTRL+F untuk memunculkan search box pada editor. Cari dengan mengisi widgetid atau title widget kemudian enter, sampai terlihat seperti gambar di bawah :

Edit HTML Elemen Widget di Editor Template Blogger

Gambar diatas contoh widget yang hanya di tampilkan kecuali di halaman homepage saja (3,4)  dengan menambahkan cond tag pembuka setelah "<b:includable id='main'>" dan tag ditutup sebelum </b:includable>

Misalnya contoh dibawah ini, widget hanya terlihat di halaman home page saja (perhatikan text yang berwarna merah, pada bagian itu yg harus ditambahkan)
<b:widget id='HTML3' locked='false' title='Artikel Terbaru' 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>

Membuat Widget Tidak Terlihat Pada Halaman Tertentu


Pada Cond Tag tersebut bisa kita rubah untuk menampilkan atau menyembunyikan widget. Dengan mengganti "==" menjadi "!=" (!selain atau kecuali) yang artinya widget tersebut tidak terlihat / disembunyikan di jenis halaman yang anda tentukan.
<!-- hanya terlihat di homepage -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

<!-- terlihat kecuali di homepage -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

Daftar Jenis Type Halaman Blogger


Kemudian anda tinggal rencanakan widget yang anda pilih akan terlihat atau tidak terlihat di jenis halaman blog anda.

Halaman Depan (Homepage)
<!-- widget hanya terlihat di halaman homepage -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

Halaman Archive
<!-- widget hanya terlihat di halaman archive -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

Halaman Postingan
<!-- widget hanya terlihat di halaman postingan -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

Di Halaman URL Tertentu
<!-- widget hanya terlihat di halaman postingan -->
<b:if cond='data:blog.pageType == &quot;url-postingan&quot;'>
......................................................
</b:if>

<!-- contoh hanya terlihat di postingan ini saja -->
<b:if cond='data:blog.pageType == &quot;http://www.modalsemangat.com/2015/10/widget-terlihat-dihalaman-tertentu.html&quot;'>
......................................................
</b:if>

Di Halaman StaticPages
<!-- widget hanya terlihat di halaman staticpages -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

Di Halaman Label / Tag Tertentu
<!-- widget hanya terlihat di halaman label / tag tertentu -->
<b:if cond='data:blog.searchLabel == &quot;nama_label&quot;'>
......................................................
</b:if>

<!-- contoh hanya terlihat di halaman label / tag Tips Blogging -->
<b:if cond='data:blog.searchLabel == &quot;Tips Blogging&quot;'>
......................................................
</b:if>

Setelah anda mengedit html template anda, klik "Save template". Untuk melakukan hal yang sama pada widget yang lain, lakukan langkah-langkah sama seperti diatas

  • Cari widgetID.
  • Cari elemen widget di Edit HTML Template.
  • Masukan kondisi tag sesuai jenis halaman pada elemen widget.