Fixing Popular Posts Margin on Blogger

I use the Blogger platform for this blog, and I recently added the "Popular Posts" widget to the sidebar. Unfortunately it did not display correctly, with the first character or two of each blog post title being lost and chopped off, as if the whole thing had been shifted to the left for some reason. Here is how I fixed it to display properly.

After a lot of reading up on HTML and CSS I realised that these posts appeared within a section with an associated style name, in this case a class. In turn I could add an entry to the HTML template for my blog to define a shift to the right for this particular class style so that it would display properly. And this shift would only be applied to this section of the blog page and no other.

What this boils down to is the following:

• The "Popular Posts" widget reference in the HTML has an attribute of "id='PopularPosts1'"
• The list of posts within this widget has two class attributes, one of which is "popular-posts"
• I could shift the list of posts far enough across to the right using the style property of "padding-left"

To apply this to your Blogger blog template do the following:

• In Blogger click on "Template" on the left hand side of your blog dashboard (under Layout and above Settings)
• Click the on "Edit HTML" button under the small image of your blog
• Expand the "

  <b:skin></b:skin>

  " section near the top by clicking on it or on the right pointing triangle on the left hand side
  • This was at line 7 on my template
• Scroll down to the end of this section, which finishes with

]]></b:skin>

• Above this on their own lines add the following:

#PopularPosts1 .popular-posts {
 padding-left: 15px
}

• Then click on the "Save Template" button at the top of the screen
• If you now redisplay your blog you should see the "Popular Posts" list has now been shifted over to the right and aligned nicely under the "Popular Posts" heading

Note the following:

• The first line states that this style is only to be used within a "popular-posts" class element that itself occurs within a "PopularPosts1" ID element.
  • This should match exactly the content section we want to be shifted across in the blog page
• The second line sets the left hand side padding before the displayed content to be "15px" (pixels)
  • The value of "15px" was obtained by simple trial and error starting with smaller values until the list was shifted over enough.

I'm not saying my solution is perfect or absolutely correct in any way, I'm just saying that it works for me, and it seems to conform to the various ways CSS works and how Blogger defines its page sections. It would seem that all of the different sidebar elements have a right shift built into them, except for Popular Posts of just titles (no snippets or thumbnails). This solution adds in such a right shift so the blog post titles are now all visible in the blog page.