How To Apply This Hack
- Go to Dashboard > Template
- Download a copy of your template first.
- Tick the Expand Widget Templates check box.
- Now find for below code in your template
]]></b:skin>
Add below code just above/before of above code.
#PopularPosts1 {
max-width: 300px
}
#PopularPosts1 dd {
float: left;
border-bottom: none;
margin: 8px 8px 0 8px;
background: none;
display: block;
padding: 0
}
#PopularPosts1 img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
Now be careful in this step.
Find below piece of code in your template
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.
.
.
.
</b:widget>
replace above piece of code with below one
<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'>
<dd>
<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'>
<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 -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuEuoAufVyalkMlbDe5GUdf7-UZvIY8l5Eg4CUyOiiLBJYFaBtkgB5ZwUAyPGuE6D04VqEF4ae272WvHpqYdgraIHlnSuZ-FQgCTX-Y7xuSdwFYgwpVbtL6YvQx-2vaj3183AYf1qgMk/s1600/helperblogger-default-image.jpg' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear' />
<b:include name='quickedit' />
</div>
</b:includable>
</b:widget>
Now save your template and you are done... :)
If you have any queries then feel free to ask me.I will reply to your questions as soon as time allows.
This comment has been removed by a blog administrator.
ReplyDelete@JayRyan09 - pls don't spam here this is your fourth time.
DeleteThanks for this post! I have it now on my blog, just want to know how do you do the social bookmarks below your post here? It's cute and I want to use it too on my blog. Thanks in advance!
ReplyDeleteOk I will publish a tutorial on it soon.Keep connected with this blog.If you want it urgently the contact me through contact page I will send you the code :)
DeletePls help , im facing the error no bX-4xcpmw
ReplyDeleteThank you, so helpful. thanx
ReplyDeletemy blog...its show thumbnail w/o snippets..why
ReplyDeleteThanks for the tutorial is easy to understand and very useful
ReplyDeleteoh yeah!! 100% working for my blog... See This if want..
ReplyDeletehttp://hdripmoviz.blogspot.com/
Follow the instruction carefully...
how to use this for blog post photo? the thumbnail one
ReplyDeleteThanx, it works good for my blog (http://www.chinhluanvn.com/)
ReplyDeletethanks....worked like a charm...The Geek Solutions
ReplyDeletedude its nice, but i need some change in it please do that on next post.
ReplyDeletei want popular post on thumbnail images only and that must be spin lik this.
i want it for my blog
http://moviethandura.blogspot.com
Its Worked
ReplyDeleteI tried it in my website and got only thumbnails.I didn't get the title of my posts.Please help...
ReplyDelete