Cara Membuat Widget Popular Posts Hanya Tampil di Halaman Postingan - Max Ikhsan
Advertisement
Advertisement

Cara Membuat Widget Popular Posts Hanya Tampil di Halaman Postingan

Widget popular posts pada umumnya selalu tampil di semua halaman, baik homepage, halaman postingan, bahkan halaman statis. Namun terkadang ada sebagian blogger yang menginginkan widget popular posts ini hanya tampil di halaman tertentu saja.

Oleh karena itu dalam kesempatan kali ini saya akan memberikan sebuah tutorial blogger cara membuat widget popular posts hanya akan tampil di halaman postingan saja.

Cara Agar Widget Popular Post Tampil di Halaman Postingan Saja

Berikut ini adalah langkah-langkah yang harus Anda lakukan untuk membuat widget popular post hanya tampil di halaman postingan.

Pertama, silahkan buka artikel tag kondisional blogger di bawah ini.

Baca: Tag Kondisional Blogger Terbaru

Selanjutnya, ikuti instruksi di bawah ini!

  • Buka Dashboard Blogger
  • Klik Menu Tema
  • Klik Edit HTML

Pada artikel tag kondisional yang sudah Anda buka, cari tag kondisional khusus halaman post. atau lihat kodenya di bawah ini.

Tag Kondisional Khusus Halaman Postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>...</b:if>

Selanjutnya, cari nama widget popular post yang anda buat. Saya contohkan "Trending". Maka untuk mencarinya dengan mudah Anda hanya perlu menekan CTRL+F, lalu ketikan kata Tranding di kolom pencariannya.

Setelah di temukan, Anda akan mendapati kode widget popular post kurang lebih seperti di bawah ini.

 <!-- sidebar wrapper start --> 
  <aside id='sidebar-wrapper'>
  <div class='sidebar-container'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='PopularPosts1' locked='false' title='Trending' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><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'>
          <b:if cond='!data:showSnippets'>
            <!-- (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/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
    </b:widget>
  </b:section>
    </b:if>

Untuk membuat widget popular posts hanya tampil di halaman postingan, maka Anda harus memberikan perintah pada kode tersebut dengan menggunakan tag kondisional khusus halaman postingan.

Berikut ini adalah contoh pemasangan tag kondisional khusus halaman postingan pada widget popular posts.

<!-- sidebar wrapper start --> 
  <aside id='sidebar-wrapper'>
  <div class='sidebar-container'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='PopularPosts1' locked='false' title='Trending' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><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'>
          <b:if cond='!data:showSnippets'>
            <!-- (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/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
     
  </div>
</b:includable>
    </b:widget>
  </b:section>
    </b:if>

Kode yang di tandai warna kuning merupakan tag kondisional khusus halaman postingan. Jika terjadi error dalam pemasangannya, cobalah menyesuaikan penempatan tag tersebut dengan widget popular posts di template yang digunakan.

Jangan lupa klik simpan, dan lihat hasilnya. 

Dengan menggunakan tag kondisional tersebut maka widget popular posts di blog Anda hanya akan tampil di halaman postingan saja. 

Kelebihan Menampilkan Widget Popular Posts Hanya di Halaman Postingan

  • Membuat loading homepage makin ringan
  • Membuat tampilan homepage lebih clean

Kekurangan Menampilkan Widget Popular Posts hanya di Halaman Postingan

  • Pengunjung dari homepage tidak akan tahu artikel paling populer di blog kita.


Bagaimana Jika Anda Ingin Memasang Widget Popular Posts di Halaman Tertentu?

Anda tinggal mengganti tag kondisionalnya saja. Jika Widget popular posts ingin ditampilkan di semua halaman blog, maka jangan menggunakan tag kondisional sama sekali.

Jika Anda hanya ingin menampilkan widget popular posts hanya di homepage dan halaman postingan, maka Anda bisa memasang dua tag kondisional, yaitu tag khusus homepage dan tag khusus halaman postingan.


Nah itulah cara membuat widget popular posts hanya tampil di halaman postingan saja. Jika kurang paham, silahkan tanyakan di kolom komentar.

Semoga bermanfaat.

Ikut diskusi
Tutup diskusi
Berkomentarlah dengan bijak dan sopan!
# Silahkan tulis pesan di kolom komentar.
# Pesan akan dibalas saat saya online.
# Komentar spam tidak dipublikasikan.

Posting Komentar