I thought when Blogger came out with their official widget to display popular posts it would be a great addition to my blog.  Like for many other people though, the widget failed to display content properly.  The problem is that content gets cut off a few character.  I searched, and it seemed no one addressed how to fix this, so I decided to fix it myself.  Basically, it’s just a css problem.  Add the following code to your Blogger template through the “edit html” option.  I placed the code above the css for the “footer” but, it doesn’t really matter as long as you have it with the rest of the css.

/* Popular Posts
----------------------------------------------- */
#PopularPosts1 {
margin: 0.5em 0;
margin-$endSide: 25px;
text-align: left;
line-height: 1.5 em;
.item-title {
margin: 0.5em 0;
margin-$startSide: 15px;
margin-$endSide: 25px;
text-align: left;
line-height: 1.5 em;
.item-snippet {
margin: 0.5em 0;
margin-$startSide: 15px;
margin-$endSide: 25px;
text-align: left;
line-height: 1.5 em;
.item-thumbnail {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 7px;

You will probably have to change the pixels for margin-$startSide and margin-$endSide depending on content is displayed in your sidebar.  Other tweaks may be necessary as well.

Now that we’ve added this code, you may notice a problem if you have the thumbnail option selected.  The image will be crowding the text on the left.  Personally, I’m not a fan of the using the image.  It looks cluttered.  However, if you want to have a thumbnail in your “popular posts” and you don’t want it crowding the text, we need to modify the template.

Again, click on “edit html” and select “expand widget templates.”  Scroll or search for the “PopularPosts1” widget.  You’ll want to cut this code:

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

Then paste it underneath this code:

<div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
<div class=’item-snippet’><data:post.snippet/></div>

Essentially, what we’ve done is rearranged the widget so the title displays first, followed by a snippet from the post, and lastly the thumbnail from the post.  It still doesn’t look terrific, but it is better than having the image smashed into the text.  My suggestion is don’t bother with the image.

If you can’t get it to work, keep on playing around with the code as your template may differ from mine. Good luck!

Categories: Hacks


Anonymous · February 3, 2011 at

>Thanks Tim, but have to admit my eyes glazed over reading all that code stuff.I haven't a clue how/or what to follow in your code instructions.I had been excited about the Popular Posts widget, but I'll just go and kill it because I would never figure that out.Search still doesn't return anything but the title/home page.What's happening to Blogger? It used to be so easy and friendly.Thanks for listening.Barb

Tim · February 4, 2011 at

>Sorry you weren't able to implement this. Hopefully, Google will fix the bug. Good luck.

Amy Kinser · February 4, 2011 at

>Thanks for posting this. I have tried forever to fix my popular posts. Now its finally fixed.

Tim · February 5, 2011 at

>You're welcome, Amy; glad you got it to work.

Ping-i · February 17, 2011 at

>I copied/pasted the code in the 'head' section, which is where the css appears to be located, but still can't get it to work properly. I pasted it right under the following line: .widget .popular-posts ul { list-style: none;}Any suggestions would be appreciated.

Janel · May 9, 2012 at

THANK YOU! This was driving me crazy, and I’d just decided to make peace with it when I found your post.

    Tim · September 10, 2012 at

    Glad it helped!

London Chow · November 24, 2012 at

Thanks Tim. But I think there’s an easier way to fix it. Please see http://www.simple-blogger.com/2011/07/how-to-fix-your-popular-post-widget-on.html

Thos · September 13, 2013 at

Found this

Dashboard > Design > Template Designer > Advanced > Add CSS – Paste the following code (see note below) – Preview before saving – if happy – Apply to Blog:

.PopularPosts .widget-content ul li {
text-indent: 0px!important;

Wonder Lorlornyo · January 14, 2018 at

when I click my post links it is displaying nothing, in the post section in the dashboard I cant view my post it is displaying nothing even though I can edit it and update it.

Leave a Reply