Cara Membuat Popular Post Berjejer (Grid)

Contoh Popular Post Grid

Cara Membuat Tampilan Populer Post Lebih Menarik (Grid) - Siang sobat, sudah lama nie tidak posting tentang tutorial blog. Kali ini saya akan sedikit berbagi ilmu tentang bagaimana cara membuat tampilan populer post kalian lebih menarik. Jadi dengan tampilan ini maka populer post kalian akan lebih tampak menarik dan akan menghemat tempat karena yang tampil hanya gambar saja. Contohnya saja diblog saya ini.

Bagaimana sobat tertarik membuat populer post kalian lebih menarik.

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'>

<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 == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (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 == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <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>

            <div style='clear: both;'/>

          <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>

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/AVvXsEgfkdBx2tYnVqZjiQB1nTlDXQ7T2Ck4ZIzFNWQ2Qd0Qk0rm5_1jeV-r8Cqo3HP3C2r_tJYG8aVAYPuoZVI_TYFVubPso9qiNb_K5xCpbhM2eaIG5XBqKHHTyNmew0Chu3ljYI2B9H9WDxk/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 . Save.

Nb : jika ingin mengembalikan seperti semula. Kalian cukup hapus widget populer post terus pasang kembali dengan yang baru.

Gimana sobat mudah bukan........... selamat mencoba!! good luck...