Cara Membuat Popular Post Hanya Gambar Saja

Popular Post pada Blog biasanya di sajikan dengan tampilan gambar artikel, judul artikel dan deskripsi artikel. Namun kali ini kita akan mencoba belajar Bagaimana Cara Membuat Popular Post Hanya Gambar Saja. Membuat Popular Post Hanya Gambar ini tentunya dapat membuat Blog kita terlihat lebih rapi dan cantik, Selain itu juga Kita juga dapat menghemat pleace penempatan widget pada Blog.

Nah Pada gambar di atas sudah terlihat contoh gambar dari popular post yang tampil hanya dengan gambar saja. Jika anda tertarik untuk Membuat Popular Post Hanya Gambar seperti gambar tersebut maka ikuti langkah-langkah yang akan saya jelaskan berikut.

1. Login Blogger
2. Buka Blog anda
3. Terlebih dahulu anda harus menambahkan widget popular post pada Blog anda dengan cara pilih Tata Letak >> Tambahkan Gadget >> Popular Post
4. Kemudian jika anda sudah menambahkan widget populer post maka selanjutnya anda harus mencari kode ]]></b:skin>  dengan memilih Template >> Edit HTML lalu copy paste kode berikut tepat di atas kode ]]></b:skin> tadi.
   

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

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

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

   .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} 

   .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

5. Kemudian Cari Kode yang mirip seperti kode berikut.

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

6. Kalau sudah ketemu di ganti dengan kode berikut.
   e berikut tepat di atas kode ]]></b:skin> tadi.
   

   <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/AVvXsEjS02lV2M8sZtWsA3Gayf3lEkJCJdl91qV620r7gl2tuKLKHqitWSpUjV92N5yA7ZbSh4JBZZSP-CV-WaCg5R7svvZgSsmmlorIF8bSwvLJB5pcIGg_nVJcCMpCsZK_YVkD-xQ93PDV6Lg/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> 

7. Lalu Simpan.                                                                                                                                                                               @selamat mencoba # semoga berhasil@