How to fix Blogger’s “popular posts” widget

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’/>
                  </a>
                </div>
              </b:if>

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!

9 Responses to “How to fix Blogger’s “popular posts” widget”

  1. Anonymous

    >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

    Reply
  2. Ping-i

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

    Reply
  3. Janel

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

    Reply
  4. Thos

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

    Reply

Leave a Reply

  • (will not be published)