Menampilkan Widget Hanya Pada Halaman Tertentu
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)
2. Menampilkan widget di semua halaman kecuali homepage.
3. Menampilkan widget hanya di halaman Archive saja.
4. Menampilkan widget di semua halaman kecuali halaman archive.
5. Menampilkan widget hanya di halaman posting.
6. Menampilkan widget di semua halaman, kecuali halaman posting.
7. Menampilkan widget hanya di postingan tertentu saja.
8. Menampilkan widget selain di postingan tertentu.
9. Menampilkan widget hanya di halaman staticpages.
10. Menampilkan widget di semua halaman, kecuali halaman staticpages.
11. Menyembunyikan widget hanya di halaman mobile device.
12. Menampilkan widget hanya di halaman mobile device.
13. Menampilkan widget hanya di halaman Kesalahan/ Error 404.
14. Menampilkan widget hanya di halaman Pencarian.
15. Menampilkan widget hanya di halaman Index.
16. Menampilkan widget hanya di halaman Item.
17. Menampilkan widget hanya di halaman Pertinjau.
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:
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:
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.
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 Baru2. 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 Baru4. 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 Baru6. 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 Baru10. 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 Baru14. Menampilkan widget hanya di halaman Pencarian.
<b:if cond='data:blog.searchQuery'>
......................................................
</b:if>
> Update Baru15. Menampilkan widget hanya di halaman Index.
<b:if cond='data:blog.pageType == "index"'>
......................................................
</b:if>
> Update Baru16. Menampilkan widget hanya di halaman Item.
<b:if cond='data:blog.pageType in ["item", "static_page"]'>
......................................................
</b:if>
> Update Baru17. 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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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.
Ternyata mudah ya hanya menyisipkan kode itu saja kan?
ReplyDeleteTerima kasih tipsnya, KK.
Salam kenal :)