Posts Categorized: Blogger

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!