Cara Membuat Popular Post Berbentuk Grid (Kotak)

Tutorial Kali ini Blogger Tutorial share tutorial blog Cara membuat Popular Post Berbentuk Grid Atau Kotak, Jadi dengan tampilan grid..akan terlihat lebih rapi dan juga menghemat tempat  karena yang tampil hanya gambar saja. Seperti pada blog saya ini...Mungkin sobat udah pada tahu cara ini..Nah..bagi yang belum dan ingin mencoba..Ikuti cara di bawah ini..

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/AVvXsEhZOXScNZDADwDfhY_K016Y_gWI87y5zxSVxfW3V_aQDwBs4wG2E5b6plLhPXKUxZRv5kP8ZdOWkyXr7laoNCVxTH2zQe23CNYmVE8uLgRp0-bmY5vA7DI9JddXWu8UT3_eeUB9m9gzKPw/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

NB :

Untuk mengembalikan ke tampilan standar, tinggal hapus widget kemudian tambahkan widget yang baru. Semoga bermanfaat.. Good Luck ya sobat :)