widget html

Widget pada HTML adalah aplikasi pengkodean 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.

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.

Cara Menampilkan dan Menyembunyikan Widget HTML di 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; ?>
    

Cara Menampilkan dan Menyembunyikan Widget HTML di 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>

Catatan: 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.

Lisensi: CC-BY-SA Creative Commons License
☝️