Cara Membuat Tampilan Popular Post Lebih Menarik (Grid)

saya share tutorial blog Cara membuat Popular Post dengan tampilan menarik (Grid), jadi dengan tampilan grid, maka popular post akan lebih menarik dan akan terlihat lebih rapi dan juga menghemat tempat  karena yang tampil hanya gambar saja.

Tutorial ini saya dapatkan dari blog sahabat yaitu blog Arsus. Mungkin sobat udah pada tahu cara membuat popular post tampilan grid ini, bagi yang belum dan ingin mencoba. Ikuti cara di bawah ini ya :

Cara Membuat Tampilan Popular Post Lebih Menarik (Grid) :

1. Jika sobat belum punya Widget Popular post silahkan tambah Widget dulu

2. Jika sudah punya Silahkan Edit Widget, Kemudian Hilangkan tanda centang pada Snippet

3. Kemuadian pergi ke Dasboard => Template => Edit HTML. Jangan beri tanda centang pada Expand Widget.

4. Cari kode ]]></b:skin>  (Untuk pencarian dengan cara cepat tekan Ctrl+F )

5. Tambahkan Kode di bawah ini diatas kode ]]></b:skin>

.popular-posts .item-thumbnail{float:left;}

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

6. Kemudian cari kata PopularPosts1 , Sobat akan diarahkan pada kode seperti di bawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

7. Ganti kode diatas dengan kode di bawah ini


<b:widget id='PopularPosts1' 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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EfVzrsrGP4o6UGWyj_n_7D_ZOFHyYMIQHpryipcRvudWLnPysg0nfW2zIe12fAMGSoGF8T4a42QPPlZ9TjtRd9W3Oy2UXYC4VRqySCrNAzUcvFa38MJtXF_ybB2BUD7DO2SCx4eOFrs/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <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>
</b:widget>


8. Simpan Template

Note :

Untuk mengembalikan ke tampilan standar, tinggal hapus widget kemudian tambahkan widget yang baru.

Oke semoga tutorial Cara Membuat Tampilan Popular Post Lebih Menarik (Grid) ini bermanfaat bagi sobat, sampai jumpa di artikel berikutnya, daaaaaa..