Cara mudah membuat Popular Post dengan tampilan Grid

Assalamualaikum,wr.wb.....>Sahabat Semuanya,! Bakalan-Tlogorejo-City,Akan Berbagi Dengan Sampeyan-->>Sebelumnya perlu Kita Tau,Bahwa Dalam hidup terkadang kita mendapatkan,Banyak apa yang tidak kita inginkan,Tapi setelah kita mendapatkan apa yang kita inginkan,Terkadang tidak bisa membuat hidup kita lebih bahagia,Dan Mencari Teman Buatku Sangat Mudah,Dan berteman Adalah Suatu Hal Yang Sangat Istimewa,Tapi Teman Yang Sangat Istimewa Buatku Adalah Teman Yang Mau Menunjukkan Kesalahanku,,,Berbagi Sesama Adalah Hal yang Sangat Menyenangkan,,,Oleh Karena Itu Melalu Blog Sederhana ini,(Blognya Kuli Bangunan) Saya Akan Berbagi Artikel Atau Tulisan Yang Saya Tulis Sendiri Maupun Hasil Copas Dari Blog Sahabat-Sahabat Lainya...Karena Membaca Adalah Jendela Akhirat,,,, Sebelumnya saya Mohon Maaf Apabila Nanti Ada Tulisan Yang Kurang Berkenan Di hati Sahabat,,,,,,   

Kali Ini ! Bakalan-Tlogorejo-City --->> Akan berbagi Mengenai

Mengenai tutorial blog Cara membuat Popular Post dengan tampilan Grid

, 

Oke Langsung aja bagaimana Cara membuat Popular Post dengan tampilan Grid, 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/AVvXsEgwXniL_8MZEYuWHj5DE4hUVvW5nVCa1gQdQ6IrbwqMRSOkkI6haOCgIM5HezMK-LBhEy3z7eOISaV49_t06LJrJhQCSQLnA9maRchkfhTy-U6Xn-AKKONT_tjOaez_bygPvEgwEFXO6G4/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..