MENAMPILKAN WIDGET HANYA PADA HALAMAN TERTENTU

Unknown | 10.58 | tips-trik

Saat pertama mendisain sebuah blog, terkadang kita terkendala oleh ruang yang tersedia dalam template blog yang telah kita pilih untuk kita pakai. Banyak ragam widget yang ingin kita tampilkan pada halaman home-page blog kita, sementara bilamana kita paksakan, maka akan timbul kesan acak-acakan. Disamping itu, untuk membuat blog kita (terutama halaman home-page) mampu tampil bagus atau profesional tidak berarti harus banyak widget yang ditampilkan. Hal ini mengandung makna bahwa kita haruslah pandai memilih dan memilah widget apa saja yang akan kita tampilkan pada halaman home-page, sedangkan widget-widget yang (dalam anggapan kita kurang penting) dapat kita tampilan pada halaman postingan misalnya.

Dalam kerangka pola pikir yang demikian itu, maka artikel kali ini akan membahas tentang cara-cara menampilkan widget hanya pada halaman tertentu dengan menambahkan script yang tidak terlalu rumit, namun sangat bermanfaat.

Saya ambil contoh berikut, kita ingin menampilkan widget popular post hanya pada halaman postingan (seperti pada blog ini), maka kita hanya menambahkan script <b:if cond='data:blog.pageType == "item"'> dengan diakhiri script </b:if>, contoh konkritnya seperti di bawah ini.

Script asli widget popular post yang ada pada format html template adalah :

<b:widget id='PopularPosts2' 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>

Selanjutnya, untuk membuatnya hanya tampil pada halaman postingan, akan menjadi seperti berikut ini   :

<b:widget id='PopularPosts2' 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'>
    <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>

Selanjutnya, bilamana kita ingin sebuah widget hanya tampil pada halaman home page, maka kita tinggal gunakan paduan script  <b:if cond='data:blog.url == data:blog.homepageUrl'> dan diakhiri dengan </b:if>.

Demikianlah artikel ini, semoga bermanfaat.