Tutorial Membuat Popular Post Gambar Thumnail

Tutorial Membuat Popular Post Gambar Thumnail - Postingan sebelumnya ada juga artikel berhubungan dengan popular post, dengan judul membuat popular post bergerak turun kesannya sedikit ada animasi bergerak dari atas ke bawah tepatnya popular post bergerak turun, berbeda dengan artikel popular post kali ini yang hanya menampilkan gambar saja atau lihat contoh print screen dibawah ini :

Cara sederhana membuat popular post dengan gambar thumnail, hanya menampilkan gambar saja, sedangkan artikel yang tidak terdapat gambar pada halaman posting maka gambar yang ditampilkan pada popular post tumbnail gambar polos seperti print screen diatas baris kedua kolom pertama, bagi sobat yang berminat membuat popular post menampilkan gambar berikut caranya :

1. Langkah pertama login ke dasbor blogger sahabat, tambahkan weidget Popular Post

Kemudian pilih dan atur entri populer centang thumnail gambar,

2. Masuk ke edit html cari kode popular post pada edit html, jangan conteng expand widget biarkan terlepas tidak usah di centang.

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

Kemudia hapus dan ganti kode yang diatas dengan kode html dibawah 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"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <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"'>
            
            <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/AVvXsEhrVcSd88qplm_DDiceMAQyD_0eDspdQjxsZ7HLmCpY2OAwkD_s7L2qnbDIRRh4SVj6DhRFRzsOByb8yMfWh6AXrR14gXZM2s15fwQZMimucvkSwwLRB2yAlqFgRLiOhKgItwQa2YVo8x0/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>
             </div>
            <b:else/>
            
            <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>

3. Simpan Template sahabat.

4. Copykan kode css dibawah ini diatas ]]></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;}

atau copy dan paste ke Perancangan Template > Tingkat Lanjut > Tambah Css seperti gambar dibawah ini :

http://www.bang-jefri.com/2012/08/tutorial-membuat-popular-post-gambar.html

Tutorial Membuat Popular Post Gambar Thumnail

0 komentar:

Posting Komentar