Widget, HTMLCara Menampilkan dan Menyembunyikan Widget HTML

Oleh: Gunawan - Update Terbaru: 9 Oktober 2020
Artikel ini berisi tentang Cara Menampilkan, Menyembunyikan Widget HTML (Wordpress, Blogger)
Widget, HTML
Gambar: Widget / HTML

Widget adalah aplikasi perangkat lunak yang relatif sederhana dan biasa digunakan pada desain web. Ini bisa dibuat bagi satu atau lebih platform, berbeda dengan aplikasi yang lebih kompleks seperti “spreadsheet” atau pengolah kode HTML. Widget adalah contoh pelengkap dan tambahan pada tampilan web.

HTML adalah singkatan dari Hypertext Markup Language. Ini adalah bahasa markah atau baris kode standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Penampilan pada web dapat dibantu oleh teknologi seperti “Cascading Style Sheets” (CSS) dan bahasa “scripting” seperti “JavaScript”.

Cara Menampilkan, Menyembunyikan Widget HTML (WordPress, Blogger)

Jika mempunyai banyak widget atau bagian HTML yang tampil di website atau blog yang terlalu banyak tentunya akan mengurangi kecepatan loading. Namun jika elemen itu terasa penting dan tetap ingin mempertahankan keberadaannya ada baiknya melakukan pengaturan pada halaman mana saja elemen tersebut akan ditampilkan.

Bagi yang sedang menata tampilan website ada teknik menampilkan atau menyembunyikan suatu elemen HTML atau widget di halaman tertentu. Fungsi dari teknik itu sendiri merupakan salah satu cara agar membuat halaman web lebih rapih, lebih efektif, terlihat dinamis, bahkan dapat membuat loading lebih cepat.

Teknik ini perlu diketahui dan diterapkan oleh webmaster WordPress atau blogger. Tata letak widget dan konten yang berkualitas juga merupakan kriteria penilaian tersendiri baik dari admin maupun pengunjung. Kita bisa mengatur elemen apa saja yang mau ditampilkan di halaman depan atau yang mau disembunyikan di halaman postingan sehingga tampilan website lebih rapih. Teknik ini cukup mudah untuk diimplementasikan dan hanya memerlukan waktu beberapa menit saja.

WordPress

Untuk menampilkan dan menyembunyikan widget atau bagian HTML di WordPress:

  1. Menampilkan widget HTML hanya di Home page.
    <?php if ( is_home() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  2. Menampilkan widget HTML hanya di Postingan.
    <?php if ( is_single() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  3. Menyembunyikan widget HTML di halaman Preview postingan.
    <?php if ( !is_preview() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  4. Menampilkan widget HTML di halaman posting tertentu.
    <?php if ( is_single(No ID postingan) ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  5. Menampilkan widget HTML hanya di halaman statis (static page).
    <?php if ( is_page() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  6. Menampilkan widget HTML hanya di Halaman statis tertentu (static page tertentu).
    <?php if ( is_page(No ID page) ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  7. Menampilkan widget HTML hanya di halaman Tag.
    <?php if ( is_tag() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  8. Menampilkan widget HTML hanya di Halaman Category.
    <?php if ( is_category() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  9. Menampilkan widget HTML hanya di halaman Tag Tertentu.
    <?php if ( is_tag(No ID tag) ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  10. Menampilkan widget HTML hanya di Halaman Category Tertentu.
    <?php if ( is_category(No ID category) ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  11. Menampilkan widget HTML hanya di Halaman Pencarian.
    <?php if ( is_search() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  12. Menampilkan widget HTML hanya di Halaman Author.
    <?php if ( is_author() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    
  13. Menampilkan widget HTML hanya di Halaman 404 (Not Found).
    <?php if ( is_404() ) : ?>
    <!-- ISI dari elemen atau Widget -->
    <?php endif; ?>
    

Blogger

Untuk menampilkan dan menyembunyikan widget atau bagian HTML di Blogger:

  1. Menampilkan widget HTML hanya di Home page.
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>

    Contoh:

    • warna merah adalah batas dari penggunaan kode.
    • warna biru adalah kodenya.
    <b:widget id='HTML1' locked='false' title='Nama title' 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 != ""'>
    <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>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style type='text/css'>
    /* -- Kode CSS -- */
    </style>
    <script type='text/javascript' >
    // Kode JavaScript
    </script>
    </b:if>
  2. Menampilkan widget HTML hanya di Post page (postingan).
    <b:if cond='data:blog.pageType == "item"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>
  3. Menyembunyikan widget HTML di Post page (postingan artikel).
    <b:if cond='data:blog.pageType != "item"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>
  4. Menampilkan widget HTML di halaman tertentu.
    <b:if cond='data:blog.url == "URL Halaman"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>

    Catatan: GANTI URL Halaman dengan Url / Link yang dikehendaki.

  5. Menyembunyikan widget HTML di halaman tertentu.
    <b:if cond='data:blog.url != "URL Halaman"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>

    Catatan: GANTI URL Halaman dengan Url / Link yang dikehendaki.

  6. Menampilkan widget HTML hanya di halaman arsip (archive).
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>
  7. Menyembunyikan widget HTML di halaman arsip (archive).
    <b:if cond='data:blog.pageType != "archive"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>
  8. Menampilkan widget HTML hanya di halaman statis (static page).
    <b:if cond='data:blog.pageType == "static_page"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>
  9. Menyembunyikan widget HTML di halaman statis (static page).
    <b:if cond='data:blog.pageType != "static_page"'>
    <!-- ISI dari elemen atau Widget -->
    </b:if>

Cara diatas dapat digunakan untuk menampilkan atau menyembunyikan elemen tertentu seperti tampilan halaman depan (Beranda), halaman postingan artikel, halaman statis, ataupun halaman arsip tidak penuh dijejali dengan berbagai macam widget.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *