Blogger Hints

New Version Available

2009-11-09T13:01:00.001-08:00

A new version is now available. It is much more reliable. The only problems I see are on Internet Explorer when a person first logs into a private blog. The requests to the server for comment data return with invalid data. Other visits to the page work well.

Again it doesn't work with anonymous comments.

Give it a shot (link is on the right side of the blog.)

B

New Version in the works

2009-06-07T14:06:00.000-07:00

A new version is in the works. Check back in a week or two to see if there are any updates.

The new version will:

Be based on JQuery.

Attempt to fix problems on private blogs where the comments do not show up until the page is refreshed

Other future features I plan to develop include:

Cookies that keep track of read comments

Auto color detection

Update notifier

What are Rollover Comments

2009-02-17T20:55:00.000-08:00

At the bottom of this post you can see some examples of Rollover Comments. If you put your mouse on top of the user name the comment will appear below. If you click on the user name the comment will stay on the page when you move the mouse. Go ahead and give it a try!

So You Want to See Comments on Your Blog?

2009-02-07T20:04:00.000-08:00

Installation

Click the link in the sidebar that says "Add to Blogger". Or click here!

You will be asked which blog you would like to add the widget to. Select your blog and click the "Edit Content" arrow.

You want the colors of the comments to match your blog right? In the first section of the content between <style> and </style>. This is where the colors are defined. The color is coded in there in the number like #F7E8D8. For an introduction to html color codes see here. Find colors that match your blog or that stand out. If you look in your blog layout template you will see the color codes that your blog is using (as in the image below). You can change the colors after the widget is installed by choosing to edit it in the blogger dashboard layout tab.

Click the "Add Widget" button. You can drag the widget to any location on your sidebar. The widget works the same no matter where it is.

Trouble Shooting
If you are having trouble seeing the comments on your blog, there are a couple of things that may help.

You may be using the "Classic Template." On you blog dashboard under the "Template" tab there is a link called "Customize Design." Follow the instructions there to update your template.

The default widgets may be outdated on your blog. To update them go to the blog dashboard and select the "Layout" tab. Select the Edit HTML link and at the bottom of the page there is a links that says "Revert widget templates to default." This will update you to a set of widgets that will work.

Caveats

This was designed to work with blogger templates. If you have changed the default posts widget or template this code may not work correctly. You can delete it from the Layouts tab if it is not working and your blog will return back to the previous state (no other changes will be made to your blog).

There is a known error if Anonymous comments are on a post. The widget can not find the correct author and will not display correctly. It does not ruin/destroy/mangle any real data and the comments will show up when you click the post title link.

How It Works
This widget is a smattering of Javascript code. The Javascript performs an AJAX function to retrieve post data (AJAX because private blogs do not share the JSON feeds). The Javascript then places the comments in place on the blog and adds the code to display them.

Future enhancements will include read comment history to show which comments have been read and which comments are new.

No comment Post

2008-11-21T20:37:00.001-08:00

Too bad. So Sad

Another Post With Comments

2008-11-21T20:36:00.001-08:00

This post also has comments.

Sample Post

2008-07-05T07:25:00.001-07:00

This is a short sample post to show the comment mapping on.

Rollover Comments

2006-11-14T19:49:00.000-08:00

This only works with the old templates! Use at your own risk!

Many people want to know how we do our rollover comments on our other blogs. This is your luck day, because I am going to show you.

These have been done largely with template edits. As a note they do not work with the blogger beta and we will be looking into that.

Look through your template and find code that looks like.

<p class="post-footer">
posted by <$BlogItemAuthorNickname$> at
<a href="">" title="permanent link">
<$BlogItemDateTime$>
<MainOrArchivePage><BlogItemCommentsEnabled> |        <a class="comment-link" href="">"
 <$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$>
 comments
</BlogItemCommentsEnabled></MainOrArchivePage>
<$BlogItemControl$>
</p>

</div>

 <!-- End .post -->

The stuff in bold needs to be changed to


</p>
<script>var blogPerma = "<$BlogItemPermalinkUrl$>";
var blogitemnumber = '<$BlogItemNumber$>' </script>
<MainOrArchivePage><BlogItemCommentsEnabled>
<p class="post-footer2">
<a class="comment-link" href="<$BlogItemCommentCreate$>"
     <$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$>
     comments</a> <em>from:  
     <script type="text/javascript">
       if (<$BlogItemCommentCount$> == 0)
          document.write("(no one yet)");
     </script>

     <BlogItemComments>
<script>
document.write('<span onmouseover=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="block";document.getElementById("cmenth' + blogitemnumber + '").innerHTML=document.getElementById("mc<$BlogCommentNumberdocument.write('<span onmouseover=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="block";document.getElementById("cmenth' + blogitemnumber + '").innerHTML=document.getElementById("mc<$BlogCommentNumber$>").innerHTML;\' onmouseout=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="none";document.getElementById("cmenth' + blogitemnumber + '").innerHTML="";\' onclick=\'document.location.href="'+ blogPerma +'#<$BlogCommentNumber$>";return false;\'>')
gt;").innerHTML;\' onmouseout=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="none";document.getElementById("cmenth' + blogitemnumber + '").innerHTML="";\' onclick=\'document.location.href="'+ blogPerma +'#<$BlogCommentNumberdocument.write('<span onmouseover=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="block";document.getElementById("cmenth' + blogitemnumber + '").innerHTML=document.getElementById("mc<$BlogCommentNumber$>").innerHTML;\' onmouseout=\'Javascript:document.getElementById("cmenth' + blogitemnumber + '").style.display="none";document.getElementById("cmenth' + blogitemnumber + '").innerHTML="";\' onclick=\'document.location.href="'+ blogPerma +'#<$BlogCommentNumber$>";return false;\'>')
gt;";return false;\'>')
</script>
<$BlogCommentAuthor$>, </span>

</BlogItemComments></span></em>
  </p>

<div id="cmenth<$BlogItemNumber$>" name="cmenth<$BlogItemNumber$>" class="comstyle" ></div>
</MainOrArchivePage>
 </div>
<MainOrArchivePage>
<BlogItemComments>
<div id="mc<$BlogCommentNumber$>" name="mc<$BlogCommentNumber$>" style="display:none;"><$BlogCommentBody$></div>
</BlogItemComments>

</BlogItemCommentsEnabled></MainOrArchivePage>

*NOTE:The document.write command (between the <script> (in bold) tags needs to be all on one line.

That will work in general but it won't necessarily look that good. Adding a few lines to the style at the top of the page will remedy that. If you can't find the style look for a part of the template that looks similar to those below.
```
.comstlye {
  margin:10px;
   background:#246;
   -moz-border-radius:10px;
   display:none;
   padding:5px;"
   }
p.post-footer2 {
margin:-.25em 0 0;
color:#357;
}
.post-footer2 em, .comment-link {
font:70% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:lowercase;
}
.post-footer2 em{
font-style:normal;
color:#579;
}
```
The colors (#357, #579, #246) should be changed to match your blog. Just look through the style elements and try different numbers from there.