Modify Popular Post widget becomes gallery style (Includes thumbnails and title of the posts)

This post is going to add my collection about blogger tips and tricks I got from my experience in blogging.

It’s about how to modify and make popular posts widget on your blog at blogspot become dynamic one with the look of gallery style.

I got the tutorial from here http://www.maskolis.com/2012/05/modifikasi-popular-post-untuk-template.html

1. Login to blogger.

2. Go to Template, then click Edit HTML.

3. Find this code      ]]></b:skin>

4. Copy and paste the following code above the       ]]></b:skin>

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

.PopularPosts ul{padding:5px 0}

.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

.PopularPosts .item-content{position:relative;float:left;margin:0}

.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

5. Save your template.

6. Next go to Layout section.
7. Add a gadget, select Popular Posts and customize as below.

1. Check only Image thumbnail. 
2. Number of post to show , (Display up to), set to be 5 or above value. May be 6, 7, ….10.

8. Click save.
9. Get to the template again and find these codes;

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

10. Now, replace them with these ones:

<b:widget id='PopularPosts1' locked='false' title='Most Product View' 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-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>
<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>

11. Last, save template and see the result of the recent modification. Done.