Cara Menampilkan Atau Menyembunyikan Widget Blog Pada Halaman Tertentu

Sekilas Penjelasan mengapa harus ada tutorial ini  yaitu karena untuk menjaga Estetika atau keindahan blog yang anda miliki. Seandainya anda memiliki blog yang suka memasang pernakpernik pada halaman blog dan pernak pernik tersebut anda tampilkan pada setiap halaman blog tentu akan terlihat monoton, pastinya juga akan banyak menghabiskan tempat.

Tapi sekarang bagaimana jika widget atau perak pernik tersebut diatur sedemikian rupa sehingga berubah pada setiap halamannya tentu akan menghasilkan keindahan sendiri pada blog anda dan akan menjaga kenyamanan pengunjung untuk terus berada pada blog anda.

Ok langsung saja kita ke inti pembahasan. Dibawah ini ada beberapa kode yang dapat anda gunakan untuk mengatur widget atau pernak pernik blog anda supaya tampil pada halaman tertentu saja.

1. Kede ini hanya akan menampilkan widget pada halaman Home atau halaman utama saja

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

Posisi Widget Blog

</b:if>

2. Kede ini hanya akan menampilkan widget selain Homepage atau halaman pertama

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

Posisi Widget Blog

</b:if>

3. Kode ini hanya akan menampilkan widget pada Archive Page atau halaman arsip

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

Posisi Widget Blog

</b:if>

4. Kode ini hanya akan menampilkan widget selain halaman Archive Page

<b:if cond='data:blog.pageType != &quot;archive&quot;'>

Posisi Widget Blog

</b:if>

5. Kode ini hanya akan menampikan widget pada halaman postingan saja

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Posisi Widget Blog

</b:if>

6. Kode ini hanya akan menampikan widget selain halaman posting

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Posisi Widget Blog

</b:if>

7. Kode ini hanya akan menampilkan widget pada halaman static page

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Posisi Widget Blog

</b:if>

8. Kode ini hanya akan menampilkan widget selain halaman static page

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

Posisi Widget Blog

</b:if>

9. Kode ini hanya akan menampikan widget  pada postingan tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

Posisi Widget Blog

</b:if>

10. Kode ini hanya akan menampilkan widget selain postingan tertentu

<b:if cond='data:blog.url != &quot;alamaatpostingan&quot;'>

Posisi Widget Blog

</b:if>

Sekarang kita bahas bagaimana cara meletakan kode-kode diatas.

1. Masuk ke akun Blogger sobat
2. Pilih Menu Tata Letak atau menu Layout

3. Pilih Widget yang ingin anda atur dengan klik Edit (Misalnya disini Dapur Tutorial Blogspot Ambil widget "Tutorial Blog Dan SEO")

4. Ambil Kode ID Widget tersebut (disini ID Widget ditemukan yaitu "HTML 3")

5. Sekarang Pilih Menu Template

6. Klik Pada Tombol Edit HTML

7. Klik lagi pada tombol Proses atau Lanjutkan

8. Silahkan Download Template lengkap terlebih dahulu untuk mengantisifasi kesalahan(baca tutorialnya DISINI)
9. Centang Expand Template Widget 

10. Cari Kode ID Widget (Contoh "HTML 3") yang sudah anda ambil pada langkah 4 (Gunakan Tombol CTRL + F dan F3 untuk mempermudah penarian kode)
11. Setelah ketemu anda akan menjumpai kode elemen widget seperti ini

<b:widget id='HTML1' locked='false' title='Join Me' type='HTML'> <b:includable id='main'> ......................................letak kode untuk menyembunyikan widget   <!-- 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'/> .............................. letak kode penutup </b:includable> </b:widget>

12. Letakan Kode untuk menyembunyikan widget misalnya kode untuk menampilkan widget hanya pada halaman home page saja, maka susunannya akan menjadi seperti ini

<b:widget id='HTML1' locked='false' title='Join Me' 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>

13. klik simpan

14. Selesai dan lihat hasilnya
    
    Sumber

Posted in: Tutorial Blog