See also: Moving the Blog Archive Count in Third Party Templates

As we know there have been problems with the feeds in third party templates because Blogger have made changes to the coding for their feeds. In a previous post I covered, in detail, the method I used to replace them with new Blogger compliant feeds for the Blogging Pro template used for this blog. Since then I have found that the same method works for other templates. The only difference is in the styling details for each template.

Another problem has raised its ugly head: the Blog Archive which will not expand. This is relatively easy to fix as all it requires is a straight replacement of the existing Blog Archive with a new one.

The obvious first step is to log in to your Blogger dashboard and select Layout, which will take you to the Layout>Page Elements tab for the appropriate blog. Just remember to make a note of where your Blog Archive is positioned so that you can replace it exactly if you want it in the same position.

Next click on Edit for the Blog Archive widget and when the window opens select remove and confirm that you want to remove it.

Select the Add a Gadget link in the same sidebar from which you deleted the original. In the Add a Gadget>Basics window scroll to the bottom and select Blog Archive. The Configure Blog Archive window will open and you can choose your preferences there.

Once you have selected your preferred style click Save and, if necessary, adjust its position in the side bar. Your new Blog Archive should be now be fully functioning and expanding as it should.

In The Blogging Pro Template there is a slight styling problem caused by the fact that the original designers decided to use a small background image as a bullet point for all the sidebar lists. I did not like this much at first, and I liked it even less when the archive was expanded. It looked untidy.

I made the following changes to the CSS styling and found a cleaner style I liked for my layout.

First, locate the following block of code in the head of the template:

/* Right Column */
.SR{float:right; width:369px; margin-left:21px; padding-bottom:4px; background:#eaf4ff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
SRBkg.gif) no-repeat left bottom}
.SR h2{font-size:14px; letter-spacing:-1px; padding:5px 0px; margin:0px; color:#323740}
.SR ul{padding:0px; margin:0px}
.SR li{padding:0px; margin:0px; list-style-type:none}
.SR li a{padding:2px 0px 3px 8px; color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4; background:url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
CategIco.png) no-repeat left top; width:152px; display:block}
.SR li a:visited{color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4}
.SR li a:hover{text-decoration:underline; color:#003; border-bottom:solid 1px #d4e3f4}

Then delete the highlighted section of code above so that the code looks like this:

/* Right Column */
.SR{float:right; width:369px; margin-left:21px; padding-bottom:4px; background:#eaf4ff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
SRBkg.gif) no-repeat left bottom}
.SR h2{font-size:14px; letter-spacing:-1px; padding:5px 0px; margin:0px; color:#323740}
.SR ul{padding:0px; margin:0px}
.SR li{padding:0px; margin:0px; list-style-type:none}
.SR li a{padding:2px 0px 3px 8px; color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4; display:block}
.SR li a:visited{color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4}
.SR li a:hover{text-decoration:underline; color:#003; border-bottom:solid 1px #d4e3f4}

Finally change the highlighted 8px to 0px in order to align all the links as I have. Before saving the template click Preview just to make sure that there are no errors.

I hope you like the slight style change.

Subscribe to comments for this post (RSS)