Menampilkan Dan Menyembunyikan Widget Blogger Bawaan

Menampilkan Dan Menyembunyikan Widget Blogger Bawaan, fafan trik Menampakkan dan Menghilangkan Widget  Bawaan Blogger Sesuai Keinginan kita, Baik Tampil di Halaman Awal / home page atau Tampil di Halaman Postingan. Widget bawaan blogger (default) yang dipergunakan, kita bisa mengakalinya dengan menambahkan atau dengan kata lain menyisipkan Tag Kondisional (conditional tag) diantara script widget bawaan blogger, sebagai contoh kita akan menyembunyikan widget popular post bawaan blogger pada homepage, dengan kata lain widget tidak tampil pada homepage tetapi akan tampil pada halaman posting.
Ada kelebihan jika kita menyembunyikan widget pada halaman tertentu, pertama widget tetap terpasang pada blog dan sistem widget berjalan sesuai dengan fungsi dari widget tersebut, kedua dalam hal lain jika kita menyembunyikan widget pada halaman tertentu, maka akan menghemat loading blog.

Popular posts merupakan widget bawaan blogger yang banyak (mayoritas) dipakai/terpasang pada tiap blog (Blogger) dan banyak juga yang telah melakukan modifikasi dari segi tampilan untuk widget popular post ini, saya hanya mencoba untuk menyembunyikan widget popular post tersebut dengan menyisipkan tag kondisional untuk menghemat waktu loading blog pada halaman homepage.

Menentukan ID Widget

• Langkah Pertama yang harus kita lakukan adalah mengetahui ID dari widget popular posts, untuk mengetahui Id widget popular posts masuk pada menu Layout - dan pilih judul widget Popular posts dan klik - Edit, maka akan keluar popup window untuk widget popular post - Lihat pada alamat URL paling akhir seperti ini...&widgetType=null&widgetId=PopularPosts1. popularPosts1 merupakan Id dari widget popular post.
• Langkah Kedua masuk pada menu Edit HTML dan temukan Id PopularPosts1, secara default scriptnya seperti dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Integrasi Tag Kondisional

Setelah masuk pada menu edit template, jangan lupa untuk mencentang expand template widget supaya script terlihat semua, dan akan terlihat script widget popular post seperti dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <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:includable>
</b:widget>

Sisipkan tag kondisional <b:if cond='data:blog.pageType == "item"'> dibawah kode <b:includable id='main'> dan tutup tag dengan </b:if> yang letaknya diatas </b:includable> seperti ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
  
                         ...
                  script ini di potong
                         ...

<b:include name='quickedit'/>
  </div>
</b:if>
</b:includable>
</b:widget>

Untuk mempersonalisasi widget-widget pada halaman lainnya, kalian bisa melihat Macam Tag Kondisional yang bisa dipergunakan untuk menampilkan dan menyembunyikan widget pada tiap halaman.

Melakukan Tag Kondisional pada Widget Label, Profil dan Arsip.

Dibawah ini ada tiga macam widget default blogger yang familiar dan biasa kita pergunakan pada blog, seperti Widget Label, Widget Profil, dan Widget Arsip, dari ketiga widget tersebut akan kita sisipi dengan tag kondisional untuk hanya tampil pada halaman posting, caranya sama seperti kita menyisipkan tag kondisional pada widget Popular Posts/Entri Populer yang harus diperhatikan adalah menentukan Id widget masing-masing (menentukan Id bisa melihat pada cara menyisipkan tag pada widget popular post), atau langsung melihat pada script widget dibawah ini yang sudah disisipi tag kondisional untuk hanya tampil pada halaman posting.

Widget Label

<b:widget id='Label3' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <!-- Tag Kondisional -->
  <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;'>
    <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>
</b:if> <!-- Penutup Tag Kondisional -->
</b:includable>
</b:widget>

Widget Profile

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <!-- Tag Kondisional -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
      <ul>
        <b:loop values='data:authors' var='i'>
          <li><a class='profile-name-link' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
        </b:loop>
      </ul>

    <b:else/> <!-- normal blog profile -->

      <b:if cond='data:photo.url != &quot;&quot;'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>

      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
            <data:displayname/>
          </a>
        </dt>

        <b:if cond='data:showlocation == &quot;true&quot;'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

        <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
    </b:if>

     <b:include name='quickedit'/>
    </div>
</b:if> <!-- Penutup Tag Konditional -->
  </b:includable>
</b:widget>

Widget BlogArchive

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <!-- Tag Kondisional -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:if> <!-- Penutup Tag Kondisional -->
</b:includable>
</b:widget> 

Sekian dulu Artikel sayafafan tentang :

 Menampilkan Dan Menyembunyikan Widget Blogger Bawaan