Cara Nak Buat Popular Post Bergambar

Views

Sebelum ini kita sering tengok popular post bergambar yang memanjang kebawah. Pada hari ini, saya ingin menunjukkan satu lagi kaedah untuk membuat popular post bergambar. Popular post bergambar ini adalah lebih smart dan boleh menjimatkan ruang blog anda. Jom cuba.

Step 1: Design > Add a Gadget > Pilih Popular post

*abaikan jika anda dah ada widget popular post.

Step 2:

Tick hanya pada image thumbnail.

*jika anda dah ada popular post widget, anda hanya perlu tekan edit dan tick pada image thumbnail.
Step 3:

Design > Edit HTML > tidak perlu tick Expand Widget Template

Step 4:

Tekan ctrl+F pada keyboard anda dan paste kod dibawah ke dalam kotak find.

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

Step 5:

Replace/Gantikan kod yang anda cari tadi dengan kod dibawah.

<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/AVvXsEigZ3IrwHDAqQEYtFedhTCiacouSrgUjoLp1LRJqNX-Vh_Fb64JXLkGREw-V4DLnF5KB4sM-UzxqPX6eLqO-hhhhtzdzt_qA1_o092As8I96imwmo1JYvvb0xZchnNF52uWK-5-WKpcXoo/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>

Step 6:

Save !

Step 7:

Template Designer > Advanced > Add CSS

Kemudian paste kod di bawah dan tekan apply to blog.

.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;}

Done !