Recent Comments Widget for Blogger CommentLuv Users
2/13/2009 02:13:00 AM Posted by c3v3n
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>
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.
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.
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.
(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.
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;
}
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.list-style-type: none;
}
value: none
description: no marker
value: circle
description: the marker is a circle
value: square
description: the marker is a square
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.display: inline;
}
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
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
December 23, 2018 at 8:30 PM
Thanks For Sharing so much informative blog!
Silver Taxi Melbourne
Melbourne Taxi Service
Taxi Melbourne Service
Silver Service Taxi Melbourne Airport
April 18, 2022 at 7:25 PM
Very nice!! Hope we will get more interesting articles in the future. Thanks for sharing…