Menampilkan Widget Hanya Pada Halaman Tertentu | Buku Catatan si Ugi

Sebuah website dengan desain yang menarik akan terkesan profesional dan tidak membosankan untuk dikunjungi, terlebih lagi apabila didukung dengan artikel-artikel yang menarik pula.

Pada sebuah blog atau website, seringkali kita melihat beberapa tampilan yang berbeda pada setiap halaman mereka. seperti misalnya, pada halaman utama atau home page, mereka menampilkan sebuah widget dengan style yang berbeda dengan widget yang sama yang ditampilkan pada halaman posting!

Hal tersebut tentu saja selain dengan desain yang berbeda, mereka juga menyisipkan beberapa karakter atau kode-kode tertentu untuk menampilkan atau menyembunyikan style tersebut, bahkan widgetnya pun dapat dimanipulasi untuk ditampilkan atau tidak.


Berikut ini kode-kode yang biasa digunakan untuk kasus tersebut:



1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>
> Update Baru

2. Menampilkan widget di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>


3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == "archive"'>
......................................................
</b:if>
> Update Baru

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != "archive"'>
......................................................
</b:if>


5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == "item"'>
......................................................
</b:if>
> Update Baru

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != "item"'>
......................................................
</b:if>


7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == "alamat-postingan"'>
......................................................
</b:if>


8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != "alamat-postingan"'>
......................................................
</b:if>


9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == "static_page"'>
......................................................
</b:if>
> Update Baru

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != "static_page"'>
......................................................
</b:if>


11. Menyembunyikan widget hanya di halaman mobile device.

<b:if cond='data:blog.isMobileRequest == "false"'>
......................................................
</b:if>


12. Menampilkan widget hanya di halaman mobile device.

<b:if cond='data:blog.isMobileRequest == "true"'>
......................................................
</b:if>


13. Menampilkan widget hanya di halaman Kesalahan/ Error 404.

<b:if cond='data:blog.pageType == "error_page"'>
......................................................
</b:if>
> Update Baru

14. Menampilkan widget hanya di halaman Pencarian.

<b:if cond='data:blog.searchQuery'>
......................................................
</b:if>
> Update Baru

15. Menampilkan widget hanya di halaman Index.

<b:if cond='data:blog.pageType == "index"'>
......................................................
</b:if>
> Update Baru

16. Menampilkan widget hanya di halaman Item.

<b:if cond='data:blog.pageType in ["item", "static_page"]'>
......................................................
</b:if>
> Update Baru

17. Menampilkan widget hanya di halaman Pertinjau.

<b:if cond='data:view.isPreview'>
......................................................
</b:if>


Implementasi:

Dalam Template pada Edit/HTML silahkan cari widget yang ingin kita manipulasi untuk ditampilkan. Gunakan Ctrl+f untuk memudahkan pencarian.

Pastikan widget sudah di temukan dan tampilannya akan seperti ini:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- 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:includable>
</b:widget>

Kemudian tentukan dimana widget tersebut ingin ditampilkan, seperti misalnya, widget hanya ingin ditampilkan pada halaman home page saja, halaman posting, halaman static dan lain sebagainya.

Silahkan sisipkan kode-kode diatas (poin 1-17) kedalam widget tersebut sesuai dengan kebutuhan, lihat seperti contoh berikut ini, sebuah widget yang hanya akan ditampilkan pada halaman posting saja:

<b:widget id='HTML1' locked='false' title='' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Keterangan:

Kode yang diblok merah merupakan kode (poin-5) untuk menampilkan widget hanya pada halaman posting.

Demikianlah sekilas tentang bagaimana cara untuk Menampilkan Widget Hanya Pada Halaman Tertentu.






1 komentar:

  1. Ternyata mudah ya hanya menyisipkan kode itu saja kan?
    Terima kasih tipsnya, KK.

    Salam kenal :)

    ReplyDelete


Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan