Cara Memasang Widget Popular Post di bawah Postingan

Cara Memasang Widget Popular Post di bawah Postingan

Rio Ilham Hadi

16 October 2017

Halo sobat Blanter, sudah lebih dari sebulan saya tidak update postingan di blog ini, beberapa alasan yang membuat saya tidak bisa update karena dalam sebulan tadi saya sedang belajar untuk mempersiapkan UTS 😏 dan juga menyelesaikan pesanan jasa redesign, selain itu ada beberapa project template yang memang masih tahap pembuatan.

Oke, sekarang kita lanjut ke pembahasan mengenai tutorial cara memasang widget popular post di bawah postingan atau di atas footer, pertanyaan ini beberapa kali sering muncul dalam obrolan saya dan juga halaman out of topic, 😄 kendala yang menurut saya sulit untuk mempublikasikan tutorial ini karena untuk menjelaskan posisi tata letak widget masih sulit karena setiap template berbeda-beda kode dasar. 😕

Jika sobat menggunakan template dengan ukuran wrapper yang berbeda dengan blog ini, maka sobat harus menyesuaikan ukuran popular post ini atau bisa juga dengan menambah list dari 6 menjadi 7. Untuk Responsive tentu saja widget ini sudah 100% Responsive, jika di smartphone widget ini akan berubah otomatis menjadi 2 kolom.

Demo

Tertarik untuk membuatnya? 😀

Langkah Pertama : Masuk ke Blogger > Edit HTML > Letakan kode di bawah ini tepat di bawah kode ]]></b:skin> atau di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* Popular Post Grid by IDBLANTER.COM */
#indexpopular ul li:hover .item-title a{color:#07ACEC!important}
#indexpopular ul{margin:0!important;padding:0!important}
#indexpopular ul li{width:150px;float:left;height:150px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);padding:10px!important;margin-right:10px;margin-bottom:15px}
#indexpopular .item-thumbnail{margin:0}
#indexpopular img{width:180px;height:100px}
#indexpopular .item-title{text-align:center;height:40px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;overflow:hidden}
#indexpopular h2{text-align:center;background:#07acec;color:#fff;font-family:'Roboto',sans-serif;width:200px;padding:10px;margin:10px auto;text-transform:uppercase;border-radius:3px;font-size:15px}
</style>
</b:if>
</b:if>

Langkah Kedua : Sobat hanya perlu meletakan widget popular post di atas kode <footer atau lihat gambar :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='indexpopular' id='indexpopular' maxwidgets='1' showaddelement='yes'>
  <b:widget id='PopularPosts16' locked='false' title='Popular Of The Week' type='PopularPosts' version='1'>
    <b:widget-settings>
      <b:widget-setting name='numItemsToShow'>6</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'>ALL_TIME</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, 170, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='Popular Posts' 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 class='clear'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
  </b:widget>
</b:section>
<div class='clear'/>
</b:if></b:if>

Simpan Template.

Popular Post ini hanya muncul di halaman index dan homepage, agar muncul di halaman postingan silahkan sobat hapus kode berikut ini :

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

dan jangan lupa untuk menghapus kode penutupnya.

</b:if>
</b:if>

Lihat Juga : Membuat Grid Recent Post Berdasarkan Label di Blog

Jika ada pertanyaan tentang masalah tata letak widget popular post atau cara merubah warna, silahkan corat-coret di kolom komentar. 😁

Itulah tutorial yang bisa saya bagikan kali ini, semoga bermanfaat untuk sobat semua. 😊

Share This