(Added 16 May, 2009) First an apology to anyone who found this post while it was looking a mess. For some reason Blogger decided to do away with all the paragraphs and replace them with line breaks. Some it turned into divs and it took out all the highlighting. Why? Only Blogger knows. I have now reformatted it and it should be easier to follow.

This is a fairly long post so I recommend that you read it all the way through before changing any code.

At the moment there is a problem with feeds on Blogger and many people are finding that when they upload a template to Blogger they are unable to configure the “Recent Comments” and “Recent Posts” widgets supplied with the templates. All they get is a blank and unresponsive Configure Feed window as below.

I also experienced this problem so I logged on to eBlog Templates, who supplied this Blogging Pro template and found that other users had the same problem. I tried another template and found the same problem.

I still have no idea what is causing the problem but I found a way to get these widgets to work: I replaced them with new feeds. So, here is what I did.

First of all ignore the current “Recent Comments” and “Recent Posts” widgets as clicking on their “Edit” links only brings up a blank “Configure  Feeds” windows without even a “Delete” button.

The first one  we will replace is the feed for “Recent Posts” (or “Recent Entries” as it is called in this template. Click on the “Add a Gadget” link immediately above the “Footer” area and in the “Add a Gadget” window scroll down to the “Feed” gadget and select this. A “Configure Feed” window will open so that you can enter the feed address into the “Feed URL” line. Enter the following but remember to replace YOURBLOGNAME with the name of your blog.

http://YOURBLOGNAME.blogspot.com/feeds/posts/default

Click the “Continue” button and on the next page replace the “Title” with either “Recent Posts” or “Recent Entries”, depending on which you prefer, and then save the changes.

Next click on “Add a Gadget”  and select “Feed” again to add the “Recent Comments” feed. This time enter the following address and again replace YOURBLOGNAME with your blog’s name.

http://YOURBLOGNAME.blogspot.com/feeds/comments/default

Click Continue and this time enter “Recent Comments” into the “Title” box and save your changes.

In both cases, if you have your own domain name then you must replace all of “YOURBLOGNAME.blogspot.com” with your complete domain name.

At the moment the bottom of your “Edit Layout” page may look a little untidy with a couple of grey boxes. Ignore these for now and switch to Layout>Edit HTML, click on “Download Full Template” in case of disasters and then tick the “Expand Widget Templates” box.

Scroll down to the bottom of the code and look for your new “Recent Posts” widget. This will have its title shown as either' ‘Recent Entries’ or ‘Recent Posts’ depending on which you preferred.

<b:widget id='Feed1' locked='false' title='Recent Entries' type='Feed'>
<b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
      </b:includable>
</b:widget>

Highlight all the code from  the opening tag of <b:widget…> to the end of the closing tag: </b:widget>. then right click and select Cut from the dropdown menu. Paste the code into your preferred text editor and save it just to make sure that you do not lose it.

Now you need to scroll up the listing to find the original feed. This will only be a short way above the new code. The code should look like this:

<b:section class='extra-bottom' id='extra-bottom' preferred='yes' showaddelement='no'>
<b:widget id='Feed23' locked='false' title='Recent Entries' type='Feed'>
    <b:includable id='main'>
    <div class="RecentPosts">
        <b:if cond='data:title'><h3><data:title/></h3></b:if>
        <div class='widget-content'>
            <ul class='' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
                <b:loop values='data:feedData.items' var='i'>
                    <li>
                        <span class='item-title'>
                            <a expr:href='data:i.alternate.href'>
                                <data:i.title/>
                            </a>
                        </span>
                        <b:if cond='data:showItemDate'>
                            <b:if cond='data:i.str_published != ""'>
                                <span class='item-date'>
                                    &#160;-&#160;<data:i.str_published/>
                                </span>
                            </b:if>
                        </b:if>
                        <b:if cond='data:showItemAuthor'>
                            <b:if cond='data:i.author != ""'>
                                <span class='item-author'>
                                    &#160;-&#160;<data:i.author/>
                                </span>
                            </b:if>
                        </b:if>
                    </li>
                </b:loop>
            </ul>
        </div>
        </div>
    </b:includable>
</b:widget>

Now go to your text editor and copy the code you have already saved. Next highlight all of the original code from the opening <b:widget…> tag to the closing tag as shown above. Then paste you new code and it will replace the highlighted code.

Save your template and confirm that you want to delete the original feed. If you look at your blog you should now see that you have the “Recent Posts” feed but it is not where it should be. Don’t worry there is some styling to follow later.

Now you are going to do exactly the same for the “Recent Comments” feed.

Scroll back down the HTML until you come to you new feed entry, which should look like this:

<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
     </b:includable>
</b:widget>

Again, copy everything between and including the opening and closing <b;widget> tags, right click and select Cut, then paste the new “Recent Comments” feed into your text editor.

Scroll up to locate the original feed which should be immediately under the new “Recent Posts” you just pasted in.

<b:widget id='Feed34' locked='false' title='Recent Comments' type='Feed'>
    <b:includable id='main'>
    <div class="LastComments">
        <b:if cond='data:title'><h3><data:title/></h3></b:if>
        <div class='widget-content'>
            <ul class='' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
                <b:loop values='data:feedData.items' var='i'>
                    <li>
                        <span class='item-title'>
                            <a expr:href='data:i.alternate.href'>
                                <data:i.title/>
                            </a>
                        </span>
                        <b:if cond='data:showItemDate'>
                            <b:if cond='data:i.str_published != ""'>
                                <span class='item-date'>
                                    &#160;-&#160;<data:i.str_published/>
                                </span>
                            </b:if>
                        </b:if>
                        <b:if cond='data:showItemAuthor'>
                            <b:if cond='data:i.author != ""'>
                                <span class='item-author'>
                                    &#160;-&#160;<data:i.author/>
                                </span>
                            </b:if>
                        </b:if>
                    </li>
                </b:loop>
            </ul>
        </div>
    </div>
    </b:includable>
</b:widget>
</b:section>

Again copy your new “Recent Comments” feed code from your text editor and highlight all of the old feed code from the opening to the closing <b:widget> tags as shown above. (DO NOT highlight the closing </b:section > tag!) Then paste your new code to replace the old code.

Save your template and again confirm that you wish to delete your original feed.

At the moment, if you look at your blog you will see that all the feeds in the footer area are stacked above each other on the left side. Don’t worry it just needs the CSS classes to be applied and the <h3> tags to changed to <h2> .

So far everything I have done should also work on any template experiencing the same feed problems. What follows are specific styling details for the “Blogging Pro” template.

Go back to your Edit Html and scroll down to your new feeds and add the highlighted code below:

<b:section class='extra-bottom' id='extra-bottom' preferred='yes' showaddelement='no'>
<b:widget id='Feed1' locked='false' title='Recent Entries' type='Feed'>
<b:includable id='main'>
<div class="RecentPosts">
    <h3><data:title/></h3>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
   </div>
  </b:includable>
</b:widget>
<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
<div class="LastComments">
    <h3><data:title/></h3>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
   </div>
  </b:includable>
</b:widget>
</b:section>

You add the highlighted code to create divs so that the appropriate CSS classes can be applied to position the feeds correctly.

Also notice that you will need to change the <h3> <h2> tags immediately under both <div> tags to <h2> <h3> to complete the layout. (Sorry I got this bit the wrong way round originally. I was more tired than I thought.)

The footer area should now be fully equipped with its “Recent Posts” and “Recent Comments” feeds. Also, if you go back to Layout>Page Elements the grey areas should have disappeared and the “Edit” links should now bring up the correct “Configure Feeds” windows.

I hope that this works as well for you as it has for me.

Technorati Tags: Templates,Template problems,Feeds

Subscribe to comments for this post (RSS)