Cara Memasang Widget Popular Post di bawah Postingan

Daftar Isi

Cara Memasang Widget Popular Post di bawah Postingan - Kali ini saya ingin membahas cara memasang widget popular postyang berada di bawah postingan atau artikel. 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.

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 */
#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;'>

Jangan lupa untuk menghapus kode penutupnya.

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

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

Demikianlah pembahasan saya kali ini, mudah-mudahan bermanfaat untuk sobat.