Cara Tampilkan Widget Pada Halaman Tertentu

Tampilkan (Paparan) Widget Pada Halaman Tertentu: Kali ini BM ingin berkongsi satu tutorial mudah tetapi sangat berguna. Ianya amat membantu bagi mengemaskan lagi penampilan blog anda.

Ketahuilah bahawa tidak semua widget perlu ada atau ditampilkan pada setiap halaman blog. Ada diantaranya hanya perlu ditampilkan pada halaman utama (homepage) sahaja, ada juga yang perlu ditampilkan pada halaman posting sahaja dan sebagainya.

Semua itu boleh diaturkan kemunculannya dengan mudah. Ia bukan sahaja mengemaskan penampilan halaman tersebut tetapi juga membantu mengurangkan masa untuk loading kerana beberapa widget yang tidak perlu telah dikurangkan untuk muncul dihalaman tersebut.

Contoh mudah adalah seperti Widget Entri Terkini (recent post). Tidak perlulah ianya ditampilkan di halaman depan (homepage) kerana halaman tersebut sudah tentu memaparkan susunan entri terkini blog.

Atau mungkin juga anda ingin menampilkan widget tertentu di halaman tertentu seperti setting Widget Bloglist dan Label yang hanya muncul pada halaman statik (page) seperti di blog ini.

Begitu juga dengan beberapa widget yang anda rasakan ianya hanya perlu ditampilkan atau dipaparkan pada halaman-halaman tertentu mengikut kesesuaian kegunaannya.

Tutorial ini akan memberi tunjuk ajar bagaimana hendak melakukan setting penampilan widget tersebut. Ianya mudah tetapi perlulah cermat kerana sedikit kesilapan mungkin tidak akan berjaya atau mungkin mengubah setting yang lain pula.

Tutorial

Berikut adalah panduan atau cara menampilkan widget tersebut untuk muncul dihalaman yang anda inginkan.

Anda hanya perlu memasukkan dua kod iaitu satu dibahagian atas (permulaan kod widget) dan satu lagi dibahagian bawah (penutup kod widget) di dalam html template anda.

Pilihan kod-kod ini bergantung kepada pada paparan manakah yang anda inginkan widget tersebut muncul. Pilihan kod tersebut adalah seperti di bawah ini.

1. Widget ditampilkan HANYA pada halaman depan (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

2. Widget ditampilkan di semua halaman KECUALI pada halaman depan (homepage)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

3. Widget ditampilkan HANYA di halaman posting (setiap entri).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

4. Widget ditampilkan di semua halaman, KECUALI halaman posting (setiap entri).

<b:if cond='data:blog.pageType != &quot;item&quot;'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

5. Widget ditampilkan HANYA pada posting (entri) tertentu.

<b:if cond='data:blog.url == &quot;url-entri&quot;'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

6. Widget ditampilkan di semua halaman KECUALI pada halaman posting (entri) tertentu.

<b:if cond='data:blog.url != &quot;url-entri&quot;'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

7. Widget ditampilkan hanya pada paparan Desktop (tiada pada paparan Mobile)

<b:if cond='data:blog.isMobileRequest == "false"'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

8. Widget ditampilkan hanya pada paparan Mobile (tiada pada paparan Desktop)

<b:if cond='data:blog.isMobileRequest == "true"'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

Panduan Masukkan Kod

Berikut adalah langkah-langkah untuk memasukkan pilihan kod-kod tersebut di dalam html widget template anda.

Pertama sekali, Log masuk ke akaun blogger anda.

1. Klik [Template]
2. Klik [Edit HTML]

p/s: Anda digalakkan untuk 'backup template' sebelum melakukan sebarang pengubahsuaian kod. Ianya langkah keselamatan jika berlaku sebarang masalah yang tidak diingini berlaku.

Setelah masuk ke halaman HTML, terus kepada kod widget anda sama ada dengan cara :

1. Scroll ke bawah, atau
2. Klik [Jump to widget] dan pilih widget yang ingin diubah.

Boleh juga guna carian dengan tekan [CTRL+F]

Contoh:
Widget ditampilkan di semua halaman KECUALI pada halaman depan (homepage)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
------------------------------------------
----------(kod widget anda)----------
------------------------------------------
</b:if>

Caranya:

1. Letakkan kod <b:if cond='data:blog.url != data:blog.homepageUrl'> di atas kod berikut:

<!-- only display title if it's non-empty -->

2. Letakkan kod </b:if> di atas kod berikut:

</b:includable>

3. Klik [Save template]

Penting! Pastikan kod diletakkan pada tempat yang betul!

Kini, ianya sudah selesai dan anda boleh mengujinya dengan melihat sama ada ianya berfungsi dengan baik atau tidak.

Ianya amat mudah dan bagi mereka yang takut-takut untuk mengusik kod html ini, inilah masanya untuk mencuba. Jangan risau kerana jika sudah 'backup template', sebarang kesilapan atau error berlaku, anda hanya perlu 'Restore' sahaja semula.

Widget Tertentu Untuk Halaman Tertentu

Semoga tutorial ini dapat memberi manfaat kepada yang memerlukan. Sesetengah widget amat berat masa loadingnya dan sesetengahnya pula tidak penting untuk dipaparkan di semua halaman blog.

Melalui setting di dalam tutorial ini, ianya dapat memberi pilihan buat kita untuk mengemaskan lagi penampilan blog dan mengurangkan masa loading pada halaman-halaman tertentu.

Sebenarnya, jika anda faham akan fungsi kod-kod di atas, ianya bukan sahaja boleh digunakan untuk widget tetapi apa jua bahagian di dalam template anda boleh di setkan paparannya di mana-mana halaman tertentu yang anda inginkan.

Selamat mencuba dan semoga berjaya!