Rollover Comments

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.

1. 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 -->
   

   
   
   
2. 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.
   
3. 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.