Attracting visitors is the major moto and the best Seo Technique of a good and well standed blogger.He will do anything for the sake of good targeted visitors and subcribers when a visitor pop ups on your blog accrding to a survey he will first see on the right side of your webpage and then in the bottom the popular posts is mostly placed on the right side if you have placed it on anyother place place it on the right side just under two or three widgets it will put a great impact on your posts.This will dramatically increase your visiting of any old posts or the posts which are mostly seen by the users these days including me when i visits any blog i read it further as i see firstly the popular posts widget that what kind of quality posts the author is writing and i firstly see the old visitors recomendation because it maters a lot.
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
.png)
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...
