1. New Inline Comments Form

    body

    See this page for a similar hack for the new version of Blogger.

    This hack does not work with Blogger BETA.

    After considerable use and some feedback from both users and implementors I have redone my inline comments form hack. The new hack should be simpler, cleaner, and XHTML-valid. Previous implementors will have to remove the old hack before continuing.

    You might also wish to check out the asynchronous version of this hack :)

    This hack is now coComment-compatible.

    1. Word verification for comments must be turned off (to do this go to the 'comments' tab in your blog settings, scroll to 'Show word verification for comments?' and select 'No')
    2. Turn comment posting by anonymous users on (to do this go to the 'comments' tab in your blog settings, scroll to 'Who Can Comment?' and select 'Anyone')
    3. Insert the following code into the <head> section of your blog template :
      <script type="text/javascript">
      //<![CDATA[

      function toggleitem(postid,linkid,newtxt,displaytype) {
         if(!displaytype) {displaytype = 'block';}
         var whichpost = document.getElementById(postid);
         if (whichpost.style.display != "none") {
            whichpost.style.display = "none";
         } else {
            whichpost.style.display = displaytype;
         }
         if(linkid) {
               var lnk = document.getElementById(linkid);
               lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
               lnk.innerHTML = newtxt;
         }
      }

      //]]>
      </script>

    4. Replace the <$BlogItemCreate$> tag with the following code:
      <!– COMMENT FORM –>
      <ItemPage>
      <script type="text/javascript">

      var blogTool = "Blogger";
      var blogURL = "<$BlogURL$>/";
      var blogTitle = "<$BlogTitle$>";
      var postURL = "<$BlogItemPermalinkUrl$>";
      var postTitle = "<BlogItemTitle><$BlogItemTitle$></BlogItemTitle>";
      var commentAuthorFieldName = "anonName";
      var commentAuthorLoggedIn = "false";
      var commentFormID = "cformtag<$BlogItemNumber$>";
      var commentTextFieldName = "postBody";
      var commentButtonName = "post";
      var cocomment_force = false;

      </script>

      <script type="text/javascript" src="http://www.cocomment.com/js/cocomment.js"> </script>
      </ItemPage>
      <ItemPage><a href="javascript:toggleitem('cform');">Post a Comment</a>
      <div style="display:block;" id="cform"></ItemPage>
      <MainOrArchivePage><a href="javascript:toggleitem('cform<$BlogItemNumber$>');">Post a Comment</a>
      <div style="display:none;" id="cform<$BlogItemNumber$>"></MainOrArchivePage>
         <form action="http://www.blogger.com/login-comment.do" onsubmit="isSubmit=true;" method="post"><div>
            <input type="hidden" name="blogID" value="<$BlogID$>" />
            <input type="hidden" name="postID" value="<$BlogItemNumber$>" /> 
            <div>
               <h2 class="sidebar-title form-title"><label class="cbody">Leave your comment </label></h2>
               <h2 class="sidebar-title">  You can use some HTML tags, such as <b>  &lt;b&gt;, &lt;i&gt;, &lt;a&gt;  </b> </h2>
               <textarea name="postBody" class="comment" rows="8" cols="40"></textarea>
               <h2 class="sidebar-title identity"> Choose an identity </h2>
               <div>
                  <div>
                     <input type="radio" name="iden" value="Blogger" checked="checked" onchange="toggleitem('cfo<$BlogItemNumber$>');" />
                     <label> Your Blogger display name </label>
                  </div>
                  <div>
                     <input type="radio" name="iden" value="Other" onchange="toggleitem('cfo<$BlogItemNumber$>');" />
                     <label>Other</label>
                     <div style="display:none;" id="cfo<$BlogItemNumber$>">
                        <table style="margin-left: 4em;" cellpadding="0" cellspacing="0">
                        <tr> <td colspan="2" style="padding-top:.4em;position:relative;left:-4em;" align="left"> These fields are optional, but I would appreciate it if you filled them out. </td></tr> 
                        <tr> <td> <label> Name </label> </td>
                        <td> <div class="errorbox-good"> <input type="text" name="anonName" value="" maxlength="100" class="text" />  </div> </td> </tr>
                        <tr> <td> <label> Your web page </label> </td>
                        <td> <div class="errorbox-good"> <input type="text" name="anonURL" value="" maxlength="100" class="text" />  </div> </td> </tr>
                        </table>
                     </div>
                  </div>
                  <div class="diff-user">  Or you can sign in  <a href="http://www.blogger.com/login.g?r=http%3A%2F%2Fwww.blogger.com%2Fcomment.g%3FblogID%3D<$BlogID$>%26postID%3D<$BlogItemNumber$>">  as a different user</a>.</div>
               </div>
            </div>
            <div class="errorbox-good">  </div>
            <p class="buttons">
               <input style="margin-right:.3em" name="post" value="Publish Your Comment" class="publish" onclick="isSubmit=true;" type="submit" tabindex="2" />
               <input value="Preview" type="submit" name="preview" onclick="isSubmit=true;" tabindex="3" />
            </p>
         </div></form>
      </div>
      <!– END COMMENT FORM –>

    5. Save your template and republish your blog
    Tags:
    Tags:
    Creative Commons Licence © 2006-2008 Stephen Paul Weber. Some Rights Reserved.
    Stephen Weber at 2006-01-02 02:43 | 114 Comments / Trackbacks