-->
logo
Home » Panduan Blogger » Cara Memasang Widget Popular Post di bawah Postingan Artikel
March 31, 2018

Follow

Cara Memasang Widget Popular Post di bawah Postingan Artikel

Cara Memasang Widget Popular Post di bawah Postingan Artikel
Hallo blogger, Apa kabar? Semoga baik-baik saja ya, Pada kesempatan kali ini admin akan berbagi tips ngeblog panduan memasang widget popular post dibawah postingan artikel teman-teman.

Seperti yang kita ketahui widget popular post menjadi salah satu widget yang wajib kamu pasang di blog kamu, Tujuanya untuk memberitahu pengunjung bahwa artikel itulah yang paling banyak dibaca pengunjung sehingga secara otomatis pageview kamu akan bertambah dan jika pageview pertambah penghasilan adsensepun juga bertambah.

Kalau biasanya widget popular post diletakan di samping sidebar, maka kali ini saya ingin memberikan tutorial Cara Memasang Widget Popular Post di bawah Postingan Artikel, Kurang lebih hasilnya akan seperti pada gambar dibawah ini.
Widget popular post dibawah postingan artikel ini sudah 100% responsive, Jika blog dibuka dengan smartphone maka widget popular post akan berubah menjadi dua kolom.

 Cara Memasang Widget Popular Post di bawah Postingan

  • Masuk kehalaman dasboard blogger kamu.
  • Kemudian pilih Tema >> Lalu Pilih Edit HTML
  • Kemudian letakan kode dibawah ini tepat dibawah code ]]></b:skin> atau di atas code </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>
  • Kemudian kamu hanya perlu meletakan widget poular post tepat di atas code Footer untuk lebih detailnya lihat pada gambar dibawah ini. 
<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>
  • Sampai saat ini sebenarnya udah selesai, Namun widget ini nanti hanya akan muncul pada halaman index dan homepage
  • Agar widget popular post mau muncul dihalaman postingan kamu hanya perlu menghapus kode dibawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  • Kemudian hapus juga kode penutup dibawah ini.
</b:if>
</b:if>
Sekian informasi kali ini, Jika ada pertanyaan-pertanyaa silahkan kirimkan pertanyaan kamu di kolom komentar dibawah. Terimakasih telah membaca artikel Cara Memasang Widget Popular Post di bawah Postingan Artikel

Subscribe via Email