Recent Comments Widget for Blogger CommentLuv Users

2/13/2009 02:13:00 AM Posted by c3v3n

by technicaldotcom

There are two ways to install Recent Comments Widget for Blogger Commentluv Users


First Way: Using JS-Kit.

Blogger Commentluv is integrated with JS-Kit Commenting System. JS-Kit offers a major widget in the form of Navigator. With Navigator, you may add some of the following services:
(a) Top Picks/Most Popular Posts which is based on weighted average user ratings
(b) Hot Items which is based on the number of actions/time measured by ratings and comments
(c) Recent Comments


How To Install JS-Kit's Recent Comments Widget.

(1) Go to Layout. Page Elements.
(2) Add A Gadget.
(3) Select HTML/Javascript Gadget.
(4) Copy and paste this script:

<div skin="silver" style="width: 375px"
count="25" class="js-kit-top" site="http://yourblog.blogspot.com" title=""></div>
<script src="//js-kit.com/top.js"></script>

(5) Save.
(6) View Blog.


How To Customize JS-Kit's Recent Comments Widget.

The above code generally displays all tabs. If you would like to remove everything and just leave Recent Comments Tab, follow this simple steps.

(1) Open your blog. Scroll down until you find the newly installed widget.
(2) Click Admin Console.
(3) Once the JS-Kit Navigator Admin Console opens up, UNCHECK everything except for the Comments Roll check box.

JS Kit Recent Comments Settings
View Full Size


(4) Save.
(5) View Blog.


Here's a blog that uses JS-Kit Recent Comments Widget:
Adventures in Daily Living

To explore this widget, check out:
Customizing the Navigator Service

Second Way: Using Feedburner.

Part One.

(1) Go to your blog. Scroll down to the Blogger Commentluv Form.
(2) At the bottom right part, right click the RSS link. Select Copy Link Location.

JS Kit RSS link
View Full Size


Below is a sample format of the feed link:

http://js-kit.com/rss/yourblog.blogspot.com

(3) Now that you have the exact address for your Blogger CommentLuv Feed, go to Feedburner.
(4) Login if you already have an account, sign up if otherwise.
(5) Under the "Burn a feed right this instant" box, paste the copied Blogger Commentluv feed URL. Click NEXT button.

feedburner type your url here

(6) You will then be directed to the page where you will be prompted to add/change the feed title. Once the title has been updated, click ACTIVATE FEED button.
(7) Go to Publicize Tab. Click BuzzBoost from the sidebar.

feedburner buzzboost
View Full Size

(8) Change the Feed Settings and Displayed Content Options.
(9) Save.
(10) Copy the Buzzboost script that was generated right after pressing the SAVE button. (It is advisable to paste the code in Notepad or similar application).


Part Two.

(1) Go to Blogger and login.
(2) From the Dashboard, go to Layout. Page Elements.
(3) Add A Gadget.
(4) Select HTML/Javascript Gadget.
(5) Paste the code from Feedburner's Buzzboost.
(6) Click OK.
(7) View Blog.



How To Customize Your Feedburner Recent Comments Widget.

If you'd like to attain a look that is similar to what is installed in my left sidebar, follow this simple steps.

NOTE: BACKUP YOUR TEMPLATE!

(1) Go to Layout. Edit HTML.
(2) Before the closing tag of

]]></b:skin>
insert this CSS code:

/* -- Resyndicator -- */
div.feedburnerFeedBlock p {
font-size: 10px;
display: inline;
}
div.feedburnerFeedBlock ul li div {
display: inline;
list-style: none;
}
div.feedburnerFeedBlock span.headline {
font-size: 10px;
font-weight: bold;
}
div.feedburnerFeedBlock span.headline a {
color: #1566a7;
}
div.feedburnerFeedBlock span.headline a:hover {
color: #99cc00;
font-size: 14px;
}
div.feedburnerFeedBlock ul li {
list-style: none;
}

(3) Save Template.
(4) View Blog.



Quick Explanation on the CSS Code.

Since the widget items' default was set to display in list style, let's explore the "list-style" and "display" properties.

List-Style.

Format.

{
list-style-type: none;
}
Some possible values.

value: none
description: no marker

value: circle
description: the marker is a circle

value: square
description: the marker is a square

More options for LIST-STYLE property may be found here.



Display.

Format.

{
display: inline;
}
Some possible values for this CSS property.

value: none
description: the element will not be displayed

value: inline
description: the element will be displayed as an inline element, with no line break before or after the element.

value: block
description: the element will be displayed as a block-level element, with a line break before and after the element

More options for DISPLAY property may be found here.



FeedBurner Trick: How To Hide Feedburner Icon.

Don't you sometimes wish you can hide the feedburner icon which is usually located at the bottom of your widget? This can be done by adding one simple line of code.

Just before the closing tag of

]]></b:skin>
insert this line:

#creditfooter {display: none;}


To learn more about customizing BuzzBoost appearance, check out: Using and Customizing BuzzBoost appearance

To gather ideas on what kind of customization you may want to apply to the widget, go to: BuzzBoost Sample Applications

To override the default BuzzBoost Settings, visit:
Overriding BuzzBoost Settings



Blogger Commentluv.

If you haven't installed Commentluv for Bloggers yet, try it now:
Commentluv's Download Page for Blogger Platform
How To Install CommentLuv On Your Blogspot Blogs


If you're using other platforms, please see:
Andy Bailey's New Platforms Supported for Commentluv


If you'd like to customize its appearance and skin, please read:
How To Customize Your Blogger Commentluv's Skin



Have fun! ^_^



Quick Note: You may also add a Recent Comments Widget designed for Blogger Commentluv through Yahoo Pipes. Tutorial and links will be posted on the next articles.



Resources:
http://www.w3schools.com/CSS/pr_list-style-type.asp
http://www.w3schools.com/css/pr_class_display.asp
http://www.google.com/support/feedburner/bin/answer.py?answer=78991
http://www.feedburner.com/fb/a/buzzboost/examples
http://adventuresindailyliving.blogspot.com/2008/11/commentluv-for-blogger-is-working.html
http://js-kit.com/navigator/custom.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html

0 comments:

Post a Comment