Home / Tips and Trick Blog / Cara membuat Popular Post dengan tampilan Grid

Cara membuat Popular Post dengan tampilan Grid

Posted by Hadi blogger Selasa, 31 Januari 2012 0 komentar

Kali ini saya share tutorial blog 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"'>

<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/AVvXsEgZmBW5dvDFZKApktjCtTyfU87aMNy7VxdYBIUaJtvkVAE3GXRBAkn7BmN-TiXu8joOyeHYLfVhyphenhyphen0MDae4xASsTaMDtQIps6xysgz5tY93vEZenwgDuOS7WtJuhMAfBzn4c0x0444eCLSM/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>

8. Simpan Template

NB :

Untuk mengembalikan ke tampilan standar, tinggal hapus widget kemudian tambahkan widget yang baru. Semoga bermanfaat..

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara membuat Popular Post dengan tampilan Grid
Ditulis oleh Hadi blogger
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://metxp.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html. Terima kasih sudah singgah membaca artikel ini.