Cara Menyembunyikan Dan Menampilkan Widget

Cara Menyembunyikan Dan Menampilkan Widget Di Halaman Tertentu - Pada postingan kali ini, saya akan membahas masalah tentang hide-hide-an dulu. Menyembunyikan dan Menampilkan postingan ini sangat efektif untuk mempersedikit tampilan sidebar anda, dapat meng-efektifkan penggunaan widget, serta dapat menambah kecepatan blog anda. Anda hanya cukup menaruh beberapa script berikut di dalam widget tersebut. Langsung saja penjelasannya :

1. Menyembunyikan dan Menampilkan Widget Hanya Di Halaman Depan
Untuk contohnya, saya akan menggunakan widget Kategori. Di dalam widget tersebut terdapat kode berikut :

Nb :
Sebelumnya masuk ke Rancangan >> Edit HTML >> Expand Template Widget

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:280px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</div>
</b:if>
</b:includable>
</b:widget>

• Kode yang berwarna merah harus disisipkan agar mau muncul pada halaman depan
• Kode yang berwarna biru adalah kode yang menjadi patokan agar tak bingung saat menaruh kode merah tadi

2. Menyembunyikan dan Menampilkan Widget Hanya Di Halaman Postingan
Untuk contoh saya akan menggunakan widget Artikel Populer. Di dalam widget tersebut terdapat kode berikut :

Nb :
Sebelumnya masuk ke Rancangan >> Edit HTML >> Expand Template Widget

<b:widget id='PopularPosts1' locked='false' title='Yang Sering Di Baca' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:if>
</b:includable>
</b:widget>

• Kode yang berwarna merah harus disisipkan agar mau muncul pada halaman depan
• Kode yang berwarna biru adalah kode yang menjadi patokan agar tak bingung saat menaruh kode merah tadi

Selamat Mencoba !
Enjoy Ngeblog !

Tweet