Blogger Tricks

I've always found that the process of adding comments to a blog entry is a bit jarring from a user experience perspective. They click a link and then they're taken away from your blog into a Blogger page with a totally different look and feel, that is not immidiately recognized as part of your blog. So, I created the "Quick Comment" control as a way to solve this issue.

Quick Comment integrates the comment form directly into your blog. In it's current incarnation, users are still taken back to that familiar blogger page after they submit their comment, but hey it's a start.

If you want to see Quick Comment in action, click the "X Comments" link at the bottom of this post. You will be taken to a page that has an integrated Quick Comment control.

Like it? Ok, here's how to implement it on your blog:

The first thing you need to know is you blog ID, which you can find by following the instructions in the Blogger article found here.

Next, you'll want to go into the settings for your blog and under comments you want to ensure that "Anyone" can leave a comment. I also suggest that you turn on comment moderation to help prevent spam.

Finally, copy/paste the text below into your blog template anywhere between the <Blogger>...</Blogger> tags and make sure you put your blog id in the specified location.

<div id="quickComment">
        <script type="text/javascript">
            function identityToggle(sRadioClicked)
            {
                switch(sRadioClicked)
                {
                    case "Blogger":
                    document.getElementById("bloggeruser").style.display = "block";
                    document.getElementById("nonbloggeruser").style.display = "none";
                    break;
                    
                    case "Other":
                    document.getElementById("nonbloggeruser").style.display = "block";
                    document.getElementById("bloggeruser").style.display = "none";
                    
                    break;
                    
                    case "Anon":
                    document.getElementById("bloggeruser").style.display = "none"
                    document.getElementById("nonbloggeruser").style.display = "none"
                    break;
                    
                    default:
                    document.getElementById("bloggeruser").style.display = "none"
                    document.getElementById("nonbloggeruser").style.display = "none"
                    break;
                }
            }
        </script>
        <form action="http://www.blogger.com/login-comment.do" onsubmit="isSubmit=true;"
            method="post">
            <!-- 
            Replace the "xxxxxx" in the input below with you Blog Id. 
            For instructions on how to find your Blog Id, see:
            http://help.blogger.com/bin/answer.py?answer=874&topic=12    
             -->
            <input type="hidden" name="blogID" value="xxxxxx">
            <input type="hidden" name="postID" value="<$BlogItemNumber$>">
            <div id="quickCommentTitle">
                Leave your comment
            </div>
            <div id="quickCommentInstruction">
                You can use some HTML tags, such as <b style="white-space: nowrap;">&lt;b&gt;, &lt;i&gt;,
                    &lt;a&gt; </b>
            </div>
            <textarea name="postBody" tabindex="1" rows="5" style="width:100%" id="comment-body"></textarea>
            <div id="quickCommentChooseId">
                Choose an identity</div>
            <input type="radio" name="iden" value="Blogger" id="iden-bname" onclick="javascript:identityToggle('Blogger')" />Blogger
            <input type="radio" name="iden" value="Other" id="iden-other" onclick="javascript:identityToggle('Other')" />Other
            <input type="radio" name="iden" value="Anon" checked id="iden-anon" onclick="javascript:identityToggle('Anon')" />Anonymous
            <table cellpadding="1" cellspacing="0" id="bloggeruser" style="display:none;">
                <tr>
                    <td rowspan="2">
                    </td>
                    <td style="white-space: nowrap;" valign="top">
                        Username
                    </td>
                    <td>
                        <div class="errorbox-good">
                            <input type="text" name="username" maxlength="100" id="bname" class="text">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="white-space: nowrap;" valign="top">
                        Password
                    </td>
                    <td>
                        <input type="password" name="password" maxlength="50" id="password" class="text">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td colspan="2">
                        No <em>Blogger </em>account? <a href="javascript:popUp('http://www.blogger.com/signup.g')">
                            Sign up here. </a>
                    </td>
                </tr>
            </table>
            
            <table cellpadding="0" cellspacing="0" id="nonbloggeruser"  style="display:none;">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <input type="text" name="anonName" value="" maxlength="100" id="uname" class="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        Your web page
                    </td>
                    <td>
                        <input type="text" name="anonURL" value="" maxlength="100" id="url" class="text">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="padding-top: .4em;" align="right">
                        All of these fields are optional.
                    </td>
                </tr>
            </table>
            <div id="quickCommentButtons">
                <input style="margin-right: .3em" name="post" value="Publish Your Comment" class="publish"
                    onclick="isSubmit=true;" type="submit" id="FinalPublish" tabindex="5">
                <input value="Preview" type="submit" name="preview" onclick="isSubmit=true;" tabindex="6">
           </div>
        </form>
    </div>

As always, you can use CSS to add whatever formating you like. Enjoy!

The following is a tutorial that will show you how to add user-resizable post text to your blog. If you're not sure what that is, just look to the right of the date on this post. You will see 2 icons that you can click to increase and decrease the size of this text. Try it.

Pretty cool huh? Ok, here's how to get it on your blog:

First you'll need to add a bit of javascript to your blog template. You can do this by copy/pasting the text in the box below into the <head>...</head> section of your blog template.

<script type="text/javascript">
        // ============================================ 
        // changeFontSize:  modifies the font size of   
        //                  a specified object by the   
        //                  specified increment.
        //        
        // Copyright 2006 by Bill Sparks
        // Free for all; but please leave in this header.
        // ============================================ 
        function changeFontSize(sContainerId, iIncrement)
        {
            // ============================================ 
            // DEFAULT SETTINGS: Change to suit your needs 
            // ============================================ 
            var iFontSize = 12; // the font size;
            var sFontSizeUnit = "px"; // the unit type of the font size
            var iLineHeight = 18; // the line height
            var sLineHeightUnit ="px" // the unit type of the line height
            
            // ======================================
            // Do not change anything below this line
            // ======================================
            var oContainer; // the object whose font zise we will change
            var sOriginalFontSize = ""; // the originally specified font for the object
            var sOriginalLineHeight = ""; // the originally specified font for the object
            
            oContainer = window.document.getElementById(sContainerId); // get a handle to the object
            
            sOriginalFontSize = oContainer.style.fontSize; // get the original font specification
            if(sOriginalFontSize) // if there was a font size specified on the object
            {
                iFontSize = parseInt(sOriginalFontSize.replace(/[^0-9]/g, "")); // parse out the numeric value
                sFontSizeUnit = sOriginalFontSize.replace(/[0-9]/g, ""); // parse out the unit specification
            }
            
            sOriginalLineHeight = oContainer.style.lineHeight; // get the original line height specification
            if(sOriginalLineHeight) // if there was a line height specified on the object
            {
                iLineHeight = parseInt(sOriginalLineHeight.replace(/[^0-9]/g, "")); // parse out the numeric value
                sLineHeightUnit = sOriginalLineHeight.replace(/[0-9]/g, ""); // parse out the unit specification
            }
            
            iFontSize += iIncrement; // increment the font size
            iLineHeight += iIncrement; // increment the line height
            
            oContainer.style.fontSize = iFontSize + sFontSizeUnit; // apply the incremented size to the object
            oContainer.style.lineHeight = iLineHeight + sLineHeightUnit; // apply the default line height;
        }
    </script>

You now have access to a function called "changeFontSize" that takes 2 parameters, "sContainerId" which is the unique id of the element containing whatever text you want to enlarge and "iIncrement" which is a number that indicates by how much you want to enlarge the text.

The next step is to uniquely identify the text in each of your posts. To do this, simply look for a the tag <$BlogItemBody$> in your Blogger Template and surround it with a span tag that has a unique id like so: <span id="<$BlogItemNumber$>Body"><$BlogItemBody$></span> using the <$BlogItemNumber$> tag in the id ensures that it will be unique for each post.

Now, all that remains is to add the buttons that control everything. These are just links that call our "changeFontSize" function, passing in the id we just added and an an increment of "1" for the increase size button and "-1" for the decrease size button. To add them, put the following code anywhere whithin the <Blogger>...</Blogger> section of your template.

<a href="javascript:changeFontSize('<$BlogItemNumber$>Text',1);" title="Increase Text Size">GROW</a> 
<a href="javascript:changeFontSize('<$BlogItemNumber$>Text',-1);" title="Decrease Text Size">shrink</a>

You can always add style to the buttons using CSS and you can change the increment to make text grow and shrink faster if you'd like.

That's pretty much all there is to it. Enjoy!

The template being used for this blog is my own creation. I call it "Green Machine" and beside looking pretty damn good (if I do say so myself), it also contains the following nifty little features:

- User-resizable post text (see icons to the right of the post date).
- Configurable random quotes.
- Reversed archive list inside a dropdown menu.
- Quick Comment: integrated comment form.

To use it, just copy and paste the text in the box below to the "Template" section of you blog admin screen. I recommend implementing this template with the Silver Blogger toolbar. Enjoy!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title><$BlogPageTitle$></title>
    
    <$BlogMetaData$>
    
    <script type="text/javascript">
        // ============================================ 
        // changeFontSize:  modifies the font size of   
        //                  a specified object by the   
        //                  specified increment.
        //        
        // Copyright 2006 by Bill Sparks
        // Free for all; but please leave in this header.
        // ============================================ 
        function changeFontSize(sContainerId, iIncrement)
        {
            // ============================================ 
            // DEFAULT SETTINGS: Change to suit your needs 
            // ============================================ 
            var iFontSize = 12; // the font size;
            var sFontSizeUnit = "px"; // the unit type of the font size
            var iLineHeight = 18; // the line height
            var sLineHeightUnit ="px" // the unit type of the line height
            
            // ======================================
            // Do not change anything below this line
            // ======================================
            var oContainer; // the object whose font zise we will change
            var sOriginalFontSize = ""; // the originally specified font for the object
            var sOriginalLineHeight = ""; // the originally specified font for the object
            
            oContainer = window.document.getElementById(sContainerId); // get a handle to the object
            
            sOriginalFontSize = oContainer.style.fontSize; // get the original font specification
            if(sOriginalFontSize) // if there was a font size specified on the object
            {
                iFontSize = parseInt(sOriginalFontSize.replace(/[^0-9]/g, "")); // parse out the numeric value
                sFontSizeUnit = sOriginalFontSize.replace(/[0-9]/g, ""); // parse out the unit specification
            }
            
            sOriginalLineHeight = oContainer.style.lineHeight; // get the original font specification
            if(sOriginalLineHeight) // if there was a font size specified on the object
            {
                iLineHeight = parseInt(sOriginalLineHeight.replace(/[^0-9]/g, "")); // parse out the numeric value
                sLineHeightUnit = sOriginalLineHeight.replace(/[0-9]/g, ""); // parse out the unit specification
            }
            
            iFontSize += iIncrement; // increment the font size
            iLineHeight += iIncrement; // increment the line height
            
            oContainer.style.fontSize = iFontSize + sFontSizeUnit; // apply the incremented size to the object
            oContainer.style.lineHeight = iLineHeight + sLineHeightUnit; // apply the default line height;
        }
        
        
        // ==============================================
        // showQuotation: Displays random quotes.
        // Copyright 2004 by CodeLifter.com
        // Free for all; but please leave in this header.
        // ==============================================
        function showQuotation()
        {
            var Quotation=new Array() // do not change this!

            // Set up the quotations to be shown, below.
            // To add more quotations, continue with the
            // pattern, adding to the array.  Remember
            // to increment the Quotation[x] index!
            Quotation[0] = "Be a fountain, not a drain. <br" + " /> - Rex Hudler";
            Quotation[1] = "Anybody can sympathise with the sufferings of a friend, but it requires a very fine nature to sympathise with a friend's success.<br" + " /> - Oscar Wilde";
            Quotation[2] = "Criminal: A person with predatory instincts who has not sufficient capital to form a corporation.<br" + " /> - Howard Scott";

            // ======================================
            // Do not change anything below this line
            // ======================================
            var Q = Quotation.length;
            var whichQuotation=Math.round(Math.random()*(Q-1));
            document.write(Quotation[whichQuotation]);
        }
        
        // ==============================================================
        // displayArchives: shows the archive links in a 
        //                  drop down with reversed order (newest first)
        // ==============================================================
        function displayArchives()
        {
                var archives = new Array();

                <BloggerArchives>
                    archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');
                </BloggerArchives>
                document.write("<select onChange=\"javascript:location.href=this.options[this.selectedIndex].value\">");
                document.write('<option value=\"#\" selected=\"selected\">SELECT</option>');
                for (var i=archives.length-1;i>=0;i--)
                {
                    document.write('<option value=\"' + archives[i][0] + '\">' + archives[i][1] + '</option>');
                }
                document.write("</select>");
        }
        
        // ==============================================================
        // identityToggle:  swaps visibility of identity options in
        //                  the Quick Comment control
        // ==============================================================
        function identityToggle(sRadioClicked)
        {
            switch(sRadioClicked)
            {
                case "Blogger":
                document.getElementById("bloggeruser").style.display = "block";
                document.getElementById("nonbloggeruser").style.display = "none";
                break;
                
                case "Other":
                document.getElementById("nonbloggeruser").style.display = "block";
                document.getElementById("bloggeruser").style.display = "none";
                
                break;
                
                case "Anon":
                document.getElementById("bloggeruser").style.display = "none"
                document.getElementById("nonbloggeruser").style.display = "none"
                break;
                
                default:
                document.getElementById("bloggeruser").style.display = "none"
                document.getElementById("nonbloggeruser").style.display = "none"
                break;
            }
        }
    </script>
    
    <style type="text/css">
    /*
    -----------------------------------------------
    Blogger Template Style
    Name:     Bill Sparks Poker
    Designer: Bill Sparks
    URL:      billsparkspoker.blogspot.com
    Date:     19 May 2006
    ----------------------------------------------- */
    
    /* TAGS 
    ----------------------------------------------- */
    body 
    {
        background-color: #3e3e32;
        font-family: Verdana;
        color: #ffffff;
        margin:0;
    }
    
    a
    {
        text-decoration:none;
        color: #e0fccc;
    }
    
    a:hover
    {
        color: #e9f4e6;
        text-decoration:underline;
    }
    
    a:active
    {
        color: #ffffcc;
    }
    
    a:visited
    {
        color: #e0fccc;
    }
    
    a img 
    {
        border-width:0;
    }
    
    blockquote
    {
        margin:1em 20px;
        border: dotted 1px #ffffff;
        padding: 0px 8px 0px 8px;
        background-color: #84846a; /*#dfdfb7;*/
        color:#ffffff;
    }
    textarea
    {
        width:100%;
        border: solid 1px #000000;
        background-color: #ffffff;
        color:#000000;
        font-family:"Trebuchet MS",Trebuchet,Arial;
        font-size: 12px;
    }
    pre
    {
        margin:1em 20px;
        border: dotted 1px #ffffff;
        padding: 0px 8px 0px 8px;
        background-color: #84846a; /*#dfdfb7;*/
        color:#ffffff;
        height: 100px;
        overflow:auto;
        width:100%;
    }
    select
    {
        border: solid 1px #3e3e32;
        color:#ffffff;
        font-family: Arial;
        font-size:9px;
        background-color: #84846a;
    }
    
    option
    {
        background-color: #84846a;
    }
    
    ul
    {
        list-style:none;
    }
    
    h1
    {
        font-famly: Arial;
        font-size: 20px;
        line-hegiht: 18px;
        text-transform: uppercase;
        color: #e9f4e6;
        display: block;
        margin:0;
        padding:0;
    }
    
    h2
    {
        font-famly: Arial;
        font-size: 9px;
        text-transform: lowercase;
        color: #e0fccc;
        margin:0;
        padding:0;
    }
    /* LAYOUT
    ----------------------------------------------- */
    #header
    {
        height: 50px;
        background-color:#84846a;
        width: 100%;
        border-bottom: solid 2px #ffffff;
        position:absolute;
        top:-18px;
    }
    
    #logo
    {
        padding-top:0px;
        padding-left:5px;
        display:block;
        position:absolute;
    }
    
    #randomQuote
    {
        padding-top:5px;
        padding-left:100px;
        font-family: Arial;
        font-size: 10px;
        width: 450px;
        display:block;
        position:absolute;
        left:20%;
    }
    
    #sideBar
    {
        margin-left: 10px;
        top: 95px;
        width: 25%;
        position:absolute;
        display: block;
    }
    
    #main
    {
        left: 28%;
        top: 95px;
        width: 64%;
        position:absolute;
        display: block;
    }
    
    #comments
    {
        padding: 12px 0px 12px 0px;
    }
    
    #footer
    {
        width:100%;
        text-align: center;
        font-family: arial;
        font-size:9px;
    }
    
    /* POST 
    ----------------------------------------------- */
    .post
    {
        border-left: solid 4px #e0fccc;
        padding-left: 8px;
    }
    
    .postTitle
    {
        font-family: Verdana;
        font-size: 26px;
        color: #ffffff;
        font-weight: bold;
        margin-bottom: 3px;
    }
    
    .postDate
    {
        font-family: Verdana;
        font-size: 9px;
        color: #ffffff;
        font-weight: bold;
        margin-bottom: 2px;
    }
    
    .postBody
    {
        font-family: "Trebuchet MS",Trebuchet,Arial;
        color: #ffffff;
        font-size: 12px;
        line-height: 18px; 
        text-align:justify;
    }
    
    .postFooter
    {
        font-family: Verdana;
        font-size: 9px;
        color: #ffffff;
        font-weight: bold;
        text-transform:uppercase;
        <MainOrArchivePage>
            margin-bottom: 60px;
        </MainOrArchivePage>
    }
    
    .postSizeButton
    {
        /*border:solid 1px #ffffff;*/
        font-family: "Times New Roman";
        font-size: 9px;
        line-height: 9px;
        color: #000000;
        text-decoration: none;
        text-align:center;
        width:12px;
     height:9px;
     border:solid 1px black;
     background-color:#ffffff;
     display: -moz-inline-box;
     display: inline-block;
    }
    
    .postSizeButton:hover
    {
        text-decoration: none;
        color: #000000;
    }
    
    /* SIDEBAR
    ----------------------------------------------- */    
    .sideBarModule
    {
        border-bottom: solid 1px #e0fccc;
        padding: 5px 0 10px 0;
        margin-bottom:10px;
        font-family: Verdana;
        font-size: 11px;
        line-height:16px;
        color: #ffffff;
    }
    
    .sideBarTitle
    {
        font-family: Verdana;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 11px;
        color: #ffffff;
        padding-bottom: 3px;
    }
    
    .profileText
    {
        font-family: Verdana;
        font-size: 11px;
        color: #ffffff;
        padding-left:8px;
    }
    
    .profileNameLocation
    {
        font-weight:bold;
        margin-bottom: 3px;
    }
    
    .profileImage
    {
        border: solid 1px #ffffff;
    }
    
    .previousPostLink
    {
        line-height:18px;
    }
    
    /* COMMENTS
    ----------------------------------------------- */   
    .commentsHeading
    {
        font-family: Arial;
        font-size: 13px; 
        line-height: 18px;
        font-weight: bold;
        text-transform: uppercase; 
    }

    .commentTitle
    {
        font-family: Arial;
        font-size: 11px; 
        font-weight: bold;
        text-transform: uppercase;    
    }
    
    .commentText
    {
        font-family: Arial;
        font-size: 11px; 
    }
    
    .commentFooter
    {
        font-family: Arial;
        font-size: 9px; 
        font-weight: bold;
        text-transform: uppercase;  
    }
    
    .commentBlock
    {
        padding: 6px 0px 6px 0px;
        border-top: solid 1px #e0fccc;
    }
    
    /* QUICK COMMENT
    ----------------------------------------------- */ 
    
    
    
    </style>
</head>

<body>
    <!-- HEADER -->
    <div id="header">
        <ItemPage>
            <a href="<$BlogURL$>">
        </ItemPage>
        <ArchivePage>
            <a href="<$BlogURL$>">
        </ArchivePage>
        <div id="logo">
            <h1><$BlogTitle$></h1>
            <h2><$BlogDescription$></h2>
        </div>
        <ItemPage>
            </a>
        </ItemPage>
        <ArchivePage>
            </a>
        </ArchivePage>
        <span id="randomQuote">
            <script language="JavaScript" type="text/javascript">
                showQuotation();
            </script>
        </span>
    </div>
    
    <!-- SIDE BAR -->
    <div id="sideBar">
        <div class="sideBarModule">
            <div class="sideBarTitle">
                About Me
            </div>
            <table border="0" style="border-collapse:collapse">
                <tr>
                    <td valign="top">
                        <img src="<$BlogOwnerPhotoUrl$>" class="profileImage" alt="I am fish, here me roar!" />
                    </td>
                    <td class="profileText">
                        <div class="profileNameLocation">
                            <$BlogOwnerFullName$><br />
                            <$BlogOwnerLocation$>
                        </div>
                        <$BlogOwnerAboutMe$>
                    </td>
                </tr>
            </table>
            <br /><a href="<$BlogOwnerProfileURL$>">View My Complete Profile</a>
        </div>
        <div class="sideBarModule">
            <div class="sideBarTitle">
                Previous Posts
            </div>
            <BloggerPreviousItems>
                <a href="<$BlogItemPermalinkURL$>" class="previousPostLink"><$BlogPreviousItemTitle$></a><br />
            </BloggerPreviousItems>
        </div>
        <!-- You can create side bar modules by following the example below -->
        <div class="sideBarModule">
            <div class="sideBarTitle">
                Sample SideBar Module
            </div>
            some text.
        </div>
        
        <div class="sideBarModule">
            <div class="sideBarTitle">
                Archives
            </div>
            <script type="text/javascript">
                displayArchives();
            </script> 
         </div>
         <p id="powered-by">
            <a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a>
         </p>
    </div>

    <!-- MAIN -->
    <div id="main">
        <Blogger>
            <div class="post">
                <BlogDateHeader>
                    <div class="postDate">
                        <$BlogDateHeaderDate$>&nbsp; &nbsp; 
                        <a href="javascript:changeFontSize('<$BlogItemNumber$>Text',1);" title="Increase Text Size" class="postSizeButton">&nbsp;A</a> 
                        <a href="javascript:changeFontSize('<$BlogItemNumber$>Text',-1);" title="Decrease Text Size" class="postSizeButton">&nbsp;a</a>
                    </div>
                </BlogDateHeader>
                <div class="postTitle"> 
                    <a name="<$BlogItemNumber$>"></a>
                    <BlogItemTitle>
                     <BlogItemUrl>
                         <a href="<$BlogItemUrl$>" title="external link">
                      </BlogItemUrl>
                             <$BlogItemTitle$>
                     <BlogItemUrl>
                         </a>
                     </BlogItemUrl>
                    </BlogItemTitle>
                </div>
                <div class="postBody" name="BlogItemBody" id="<$BlogItemNumber$>Text">
                    <$BlogItemBody$>
                </div>
                <p class="postFooter">
                    posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
                    <MainOrArchivePage>
                        <BlogItemCommentsEnabled>
                             <a href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
                        </BlogItemCommentsEnabled>
                    </MainOrArchivePage> <$BlogItemControl$>  
                </p>
            </div>  
   
            <!-- COMMENTS -->
            <ItemPage>
                <div id="comments">
                 <BlogItemCommentsEnabled>
                        <div class="commentsHeading">
                            <a name="comments"></a>
                            <$BlogItemCommentCount$> Comments:
                        </div>
                        <BlogItemComments>
                            <dl class="commentBlock">
                                <dt class="commentTitle" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
                                    <$BlogCommentAuthor$> said...
                                </dt>
                                <dd class="commentText">
                                    <p class="postText"><$BlogCommentBody$></p>
                                </dd>
                                <dd class="commentFooter">  
                                    <a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
                                 <$BlogCommentDeleteIcon$>
                             </dd>
                            </dl>
                        </BlogItemComments>
                        <p class="commentFooter">
                            <!-- BEGIN QUICK COMMENT  -->
                            <div id="quickComment">
                                <form action="http://www.blogger.com/login-comment.do" onsubmit="isSubmit=true;"
                                    method="post">
                                    <input type="hidden" name="blogID" value="28502633">
                                    <input type="hidden" name="postID" value="<$BlogItemNumber$>">
                                    <div id="quickCommentTitle" class="commentTitle">
                                        Post A Comment
                                    </div>
                                    <div id="quickCommentInstruction" class="commentText">
                                        You can use some HTML tags, such as <b style="white-space: nowrap;">&lt;b&gt;, &lt;i&gt;,
                                            &lt;a&gt; </b>
                                    </div>
                                    <textarea name="postBody" tabindex="1" rows="5" style="width:100%" id="comment-body"></textarea>
                                    <div id="quickCommentChooseId" class="commentTitle">
                                        Choose an identity</div>
                                    <input type="radio" name="iden" value="Blogger" id="iden-bname" onclick="javascript:identityToggle('Blogger')" /><span class="commentText">Blogger</span>
                                    <input type="radio" name="iden" value="Other" id="iden-other" onclick="javascript:identityToggle('Other')" /><span class="commentText">Other</span>
                                    <input type="radio" name="iden" value="Anon" checked id="iden-anon" onclick="javascript:identityToggle('Anon')" /><span class="commentText">Anonymous</span>
                                    <table cellpadding="1" cellspacing="0" id="bloggeruser" style="display:none;" class="commentTitle">
                                        <tr>
                                            <td rowspan="2">
                                            </td>
                                            <td style="white-space: nowrap;" valign="top">
                                                Username
                                            </td>
                                            <td>
                                                <div class="errorbox-good">
                                                    <input type="text" name="username" maxlength="100" id="bname" class="text">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="white-space: nowrap;" valign="top">
                                                Password
                                            </td>
                                            <td>
                                                <input type="password" name="password" maxlength="50" id="password" class="text">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td colspan="2">
                                                No <em>Blogger </em>account? <a href="javascript:popUp('http://www.blogger.com/signup.g')">
                                                    Sign up here. </a>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                    <table cellpadding="0" cellspacing="0" id="nonbloggeruser"  style="display:none;" class="commentTitle">
                                        <tr>
                                            <td>
                                                Name
                                            </td>
                                            <td>
                                                <input type="text" name="anonName" value="" maxlength="100" id="uname" class="text">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Your web page
                                            </td>
                                            <td>
                                                <input type="text" name="anonURL" value="" maxlength="100" id="url" class="text">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="padding-top: .4em;" align="right">
                                                All of these fields are optional.
                                            </td>
                                        </tr>
                                    </table>
                                    <div id="quickCommentButtons"><br />
                                        <input style="margin-right: .3em" name="post" value="Publish Your Comment" class="publish"
                                            onclick="isSubmit=true;" type="submit" id="FinalPublish" tabindex="5">
                                        <input value="Preview" type="submit" name="preview" onclick="isSubmit=true;" tabindex="6">
                                   </div>
                                </form>
                            </div>
                            <!-- END QUICK COMMENT -->
                            
                            
                        </p>
                    </BlogItemCommentsEnabled>
              <p class="commentFooter">
                     <a href="<$BlogURL$>">&lt;&lt; Home</a>
                    </p>
                </div>
            </ItemPage>
        </Blogger>
        
            <!-- FOOTER -->
            <div id="footer">
                This is my footer text.
            </div>
    </div>
</body>
</html>