Menyembunyikan dan Menampilkan Widget Pada Halaman Tertentu di Blogger

Menyembunyikan dan Menampilkan Widget Pada Halaman Tertentu di Blogger - Widget atau biasa disebut Gadget merupakan sebuah aplikasi yang ditambahkan atau dipasang pada halaman sebuah web atau blog, baik itu pada bagian sidebar maupun footer dengan menggunakan kode tertentu untuk mendukung kelengkapan fitur sebuah web atau blog.

Widget ini selain disediakan oleh Blogger atau Blogspot itu sendiri, widget ini juga banyak disediakan oleh situs-situs penyedia widget di Internet secara gratis maupun berbayar. Widget memiliki banyak fungsi untuk blog, tergantung dari jenis widget itu sendiri. Misalkan saja widget Popular Pos, widget ini berfungsi untuk menampilkan postingan-postingan yang paling sering dikunjungi pengunjung di blog atau website.

Namun pada kasus tertentu banyak blogger yang ingin menampilkan atau menyembunyikan widget yang mereka pasang di Sidebar blog pada halaman yang diinginkan baik itu halaman postingan maupun halaman statis dengan berbagai alasan tentunya, seperti satu contoh ada blogger yang ingin menyembunyikan widget Form Contact pada sidebar ketika membuka halaman statis Contact Us dengan alasan agar menghindari dua tampilan From Contact di Sidebar dan di Halaman Statis yang bisa membuat pengunjung bingung memilih From Contact.

Dengan adanya tag conditional Blogger memungkinkan anda untuk bisa menampilkan atau menyembunyikan sebuah widget atau gadget di halaman tertentu. Sebagai contoh penerapannya saya akan menyembunyikan widget Formulir Contact pada halaman statis Contact Us. Disini artinya widget tersebut hanya akan disembunyikan ketika pengunjung membuka halaman statis Contact Us. Berikut langkah-langkahnya.

Cara Menyembunyikan dan Menampilkan Widget di Halaman Tertentu

Silahkan login ke akun blogger anda dan langsung menuju menu Tata Letak atau Layout. Pilih widget yang akan disembunyikan, lalu klik edit disebelah kanan. Akan muncul sebuah jendela kecil seperti gambar di bawah ini. Hal ini dilakukan untuk mengetahui ID dari widget tersebut. Perhatikan baik-baik susunan URL pada address bar di jendela kecil geser sampai ke ujung hingga menemukan tulisan widgetId=XXX. XXX inilah ID dari widget yang akan disembunyikan. Dalam contoh ini, widget IDnya adalah ContactForm1. Setelah mengetahui ID dari widget yang akan disembunyikan tutup kembali jendela kecil tersebut dengan menekan tombol Batal atau terserah anda yang penting tidak mempengaruhi widget.

Selanjutnya silahkan pergi menuju menu Tema atau Template. Klik tanda panah ke bawah yang terletak disamping tombol berwarna orange bertuliskan SESUAIKAN, kemudian pilih dan klik Edit HTML. Setelah terlihat seluruh kode template klik 1 kali kemudian tekan Ctrl+F sehingga muncul sebuah textbox kecil di pojok kiri kode template. Isi dengan widget ID yang sudah anda dapatkan tadi pada langkah sebelumnya, kemudian tekan Enter pada keyboard

Secara otomatis anda akan dibawa ke kode widget contact us pada sidebar yang akan anda sembunyikan di halaman statis Contact Us dengan tulisan setabilo warna kuning seperti gambar berikut.

Untuk menyembunyikan widget tersebut, maka tag Conditional yang harus digunakan adalah cond='data:view.url != "URL_HALAMANSTATIS_CONTACTUS"'. Apabila ingin menyembunyikan atau menampilkan widget di halaman yang lain anda bisa menemukannya pada akhir tulisan artikel ini di bawah.

Sekarang saatnya untuk penerapan kode tag Conditional pada kode template. Misalkan kode widget aslinya seperti berikut.

<b:widget id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>

Dan URL halaman statis Contact Us

https://lomboksight.blogspot.com/p/contact-us.html

Tambahkan kode tag Conditional cond='data:view.url != "URL_HALAMANSTATIS_CONTACTUS"' kemudian pada tulisan URL_HALAMANSTATIS_CONTACTUS ganti dengan URL halaman statis Contact Us hingga kode aslinya akan menjadi seperti ini.

<b:widget cond='data:view.url != "https://lomboksight.blogspot.com/p/contact-us.html"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>

Setelah semua dirasa benar, silahkan klik logo disket yang berarti Simpan Tema atau Template.

Berikut kode tag Conditional apabila anda ingin menerapkannya pada halaman lain (saya menggunakan widget ContactForm sebagai contoh)

1. Hanya ingin menampilkan widget di halaman depan blog (homepage)

<b:widget cond='data:view.isHomepage' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

2. Ingin menyembunyikan widget di halaman depan blog (homepage)

<b:widget cond='!data:view.isHomepage' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

3. Hanya ingin menampilkan widget di halaman postingan dan halaman statis

<b:widget cond='data:view.isSingleItem' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

4. Ingin menyembunyikan widget di halaman postingan dan halaman statis

<b:widget cond='!data:view.isSingleItem' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

5. Hanya ingin menampilkan widget di halaman postingan

<b:widget cond='data:view.isPost' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

6. Ingin menyembunyikan widget di halaman postingan

<b:widget cond='!data:view.isPost' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

7. Hanya ingin menampilkan widget di halaman statis

<b:widget cond='data:view.isPage' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

8. Ingin menyembunyikan widget di halaman statis

<b:widget cond='!data:view.isPage' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

9. Ingin menyembunyikan widget di semua halaman pencarian

<b:widget cond='!data:view.isSearch' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

10. Ingin menyembunyikan widget di halaman pencarian label

<b:widget cond='!data:view.isLabelSearch' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

11. Ingin menyembunyikan widget di halaman postingan, halaman statis, dan Error

<b:widget cond='!data:view.isSingleItem or !data:view.isError' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

12. Ingin menyembunyikan widget di menu layout blogger

<b:widget cond='!data:view.isLayoutMode' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

13. Ingin menampilkan widget di halaman postingan tertentu (URL tertentu)

<b:widget cond='data:view.url == "URL_ANDA_DISINI"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

Contoh :

<b:widget cond='data:view.url == "https://www.bungfrangki.com/2018/08/agar-iklan-tidak-tampil-saat-preview-artikel.html"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

Jika 2 URL :

<b:widget cond='data:view.url == "URL_1" or data:view.url == "URL_2"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

14. Ingin menyembunyikan widget di halaman postingan tertentu (URL tertentu). Penerapannya seperti contoh penerapan langkah di atas

<b:widget cond='data:view.url != "URL_ANDA_DISINI"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

15. Ingin menampilkan widget hanya di halaman nama label tertentu

<b:widget cond='data:view.search.label == "NAMA_LABEL"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

Jika 2 label :

<b:widget cond='data:view.search.label == "NAMA_LABEL_1" or data:view.search.label == "NAMA_LABEL_2"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>

16. Ingin menyembunyikan widget hanya di halaman nama label tertentu

<b:widget cond='data:view.search.label != "NAMA_LABEL"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>...</b:widget>

Jika 3 label :

<b:widget cond='data:view.search.label != "NAMA_LABEL_1" and data:view.search.label != "NAMA_LABEL_2" and data:view.search.label != "NAMA_LABEL_3"' id='ContactForm1' locked='false' title='Contact Us' type='ContactForm'>

Secara keseluruhan kode yang digunakan pada dasarnya sama, hanya memiliki sedikit perbedaan yakni pada kode menyembunyikan terdapat tanda seru ( ! ) yang artinya NOT, sedang pada kode menampilkan tidak terdapat tanda seru ( ! ).

Dengan adanya tag Conditional ini, maka para blogger bisa mengatur tampilan halaman-halaman blog yang mereka miliki dengan mudah. Baik itu untuk menghindari double tampilan aplikasi seperti yang saya alami, mempercepat loading halaman tertentu, dan sebagainya.

Demikian tutorial sederhana mengenai bagaimana cara menyembunyikan atau menampilkan widget atau gadget pada halaman tertentu di Blogger. semoga bermanfaat and Happy Blogging.

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG