Our objective is to create a Recent Comments widget, that displays recent comments in the following format: "On [date & year] [author] commented on [post title]: [comment-summary] (more)".
Here is how you do it.
Step 1: Make a backup of your template.
Step 2: Add a standard recent comments widget to your Blog.
From the dashboard select your Blog and click Layout. Go to the Template tab and select Page Elements. In your sidebar add a Feed page element.
Enter your comment feed url.
Tick Item dates and Item sources on.
Save your template and view your Blog. You now have a standard recent comments widget.
Step 3: Add some javascript to the head of your template.
If you added my social bookmarking hack, you can skip this step.
If not, go to the Template tab, click Edit HTML, and add the following line of code to your templates head, just above the </head>-tag:
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
Save the template.
Step 4: Replace the widget coding
Go to the Template tab, and click Edit HTML. Now find your sidebar, and look for the new widget you just created. It will look something like this:
<b:widget id='Feed2' locked='false' title='Recent comments' type='Feed'/>
Now click Expand Widget Templates, and look for the widget. Use Ctrl-F to find it, using it's ID (in this example Feed2).
Replace the entire 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 <data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != ""'>
<span class='item-author'>
 - <data:i.author/> commented on
</span>
</b:if>
</b:if>
<script type='text/javascript'>getPostTitle("<data:i.alternate.href/>")</script> :
<span class='item-title'>
<data:i.title/> <script type='text/javascript'>getCommentLink("<data:i.alternate.href/>")</script>
</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Save your template.
Your hack is implemented now.
Tech stuff.
I started with the standard-widget. First I canged the order of the <data>-elements to date, author, comment-summary. The comment-summary is represented by <data:i.title/>. In the standard widget, the comment summary is embedded in an anchor that links (or should link) to the comment. The consruction 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 format: "http://yourblog.blogspot.com/year/month/posttitle.html#number".
We will use this link to parse the posttitle from it, and to retrieve the correct comment-permalink. The correct permalink to the comment has the folowing format:
"http://yourblog.blogspot.com/year/month/posttitle.html#comment-number".
I wrote 2 js functions. The first function, getPostTitle, is handed the alternate.href, and writes the post title as a hyperlink to the post-item-page to the document. The second function, getCommentLink, is handed the alternate.href, builds the correct permalink, and displays it as a (more)-link.
That is a awesome post.
ReplyDeleteWe are a team of passionate and determined people who are totally focused on resolving every error that can occur during QuickBooks software runtime. Visit us to know more, and get assisted by our expert team. Vist our QuickBooks File Doctor page for learning what is QuickBooks File Doctor and how to use it.