
So here are the steps to make grid style popular posts widget
1. Go to the Layout Page and add the Popular Posts Gadget,If you have already installed just skip this step
2. Edit the Gadget Settings so that it displays the Thumbnails

3. Now Go to Template Edit Html . Do not Click on the Expand Widget.Look for
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>Just Press Ctrl+f and serch for this line
4:When You find it remove the whole line and paste the following code at the same position
<.........Grid style popular posts widget code starts here...........> Created By Blogging-Heaven<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='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/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>0
Created By Blogging-Heaven
<...............Grid style popular posts widget code ends here................>
5:Now Just Save Your Template
6. Now Go to Template -- Advanced -- Add CSS and paste the following CSS snippet at the end of the whole Css Code, and click apply to your Blog at the top right corner
.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;}Widget looks like this after Tweaking
Want Your old Widget Back Just go in the settings of popular posts widget and click on show snippets and you are retrived to the old one.....
Stay blessed and happy installing...