New Recent Comments hack on Blogspot

Current comments can be showed in the sidebar of your Blog using the Feed page component. As a Feed-URL you can provide "http://yourblogname/feeds/comments/full" to find the last 3 comments, with author and name. That's the typical functionality, and I actually didn't like it at all. The typical comments-feed has a few possessions missing. The first few words of the comment are displayed as a link after clicking the link brings you to the top of the post-item page instead of to the comment itself. That is cause of a bug in the link that is offered by Blogger. Then, I need to see on what post a person has commented. The feed doesn't present for the post title, but we could obtain it from the link - and that is where this hack boots in.

Our intention is to generate a Recent Comments widget that displays recent comments in the following format: "On (date and year) [author name] commented on [post title]: [comment-summary]".

Here is how you perform it.

Step 1: At first backup of your template.

Step 2: Now add a standard current comments widget to your Blog.

On the dashboard select your Blog and click Layout. Go to the Template tab and click Page Elements. In your sidebar add a Feed page element.

Now enter your comment feed URL in the blank space and Mark Item dates and Item sources on.

After then save your template and view your Blog. You now have a standard recent comments widget.

Step 3: In the head section of your template, add some JavaScript code.

You can skip this action.If not, go to the Template tab, click Edit HTML, and add the following HTML code to your templates head section, just above the </head>-tag-

 <script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

 

Now save your template.

Step 4: Restore the widget coding:

Go to the Template tab and click Edit HTML. Look at your sidebar for the new widget you presently created. It will look something like this:

<b:widget id='Feed2' locked='false' title='Recent comments' type='Feed'/>

Now click Enlarge Widget Templates and look for the widget. Use Ctrl-F to find it, using its ID

Replace the total widget by the following code:

<b:widget id='Feed2' locked='false' title='Recent comments' type='Feed'>

<b:includable id='main'>

<h2><data:title/></h2>

<div class='widget-content'>

<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

<b:loop values='data:feedData.items' var='i'>

<li>

<b:if cond='data:showItemDate'>

<b:if cond='data:i.str_published != ""'>

<span class='item-date'>

On&#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;- <data:i.author/> commented on

</span>

</b:if>

</b:if>

<script type='text/javascript'>getPostTitle (&quot ;<data:i.alternate.href/>&quot;)</script>&#160;:

<span class='item-title'>

<data:i.title/>&#160;<script type='text/javascript'>getCommentLink(&quot;<data:i.alternate.href/>&quot;)</script>

</span>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Now save your template.

Your hack is applyed now.

Teach substance.

I started with the normal -widget. At first I tainted the order of the <data>- basics to date, author, comment- outline. The comment-summary is represented by <data:i.title/>. In the standard widget, the comment outline is entrenched in an anchor that links (or must link) to the comment. The construction looks like this:

<a expr:href='data:i.alternate.href'><data:i.title/></a>

The link-address of the <data:i.alternate.href/>-field has the following plan: "http://yourblogname.blogspot.com/year/month/posttitle.html#number".

We will utilize this link to parse the posttitle from it, and to retrieve the correct comment-permalink. The correct permalink to the comment has the folowing plan:

"http://yourblog.blogspot.com/year/month/posttitle.html#comment-number".

I was creating 2 jobs. The first job, getPostTitle, is handed the exchange and writes the post title as a hyperlink to the post-item-page to the text. The 2nd job, getCommentLink, is handed the substitute and erects the accurate permalink and displays it as a link.