2008年1月27日

改進Blogger的留言方式

接觸Blogger以來,有一個想法從沒改變–Blogger的留言方式我非常不喜歡,當想要留言時,還要另外開一個視窗(分頁),對於瀏覽者來說非常不方便,Josh我比較喜歡的是像Wordpress那一種在文章頁面內直接留言的方法,即省時又方便。

我也曾經在Singpolyma那裡看過替代方法–利用Lightbox這支JS將留言的頁面直接載入,但是還要再另外載入二支JS,整個Blog開啟完畢的時間拉的太長,只好再尋找別的方法。

今天在Google上又發現一個方法,就是將整個留言的頁面鑲嵌進文章的頁面,作法有點小複雜,建議先備份一下Template。
原始文章出處:
a comment form under post in blogger - like wordpress comment style.
  1. 進入控制主頁–範本–修改Html,選取「展開小裝置範本」,尋找下最程式片段:
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
    <a expr:name='"comment-" + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>
    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </p>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
    <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
    </b:if>
    </div>
    </div>
    </div>
    </b:includable>

    也就是從<b:includable id='comments' var='post'><b:includable id='comments' var='post'>的前一行,就是待會要取代的片段。
  2. 將上述的程式片段以下列程式取代:
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

    <!-- jackbook.com part 1 start -->
    <!--
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>
    -->
    <div class='onepx'>
    <dl id='comments-block' style='height: 1px;overflow:hidden;'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
    <a expr:name='"comment-" + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>

    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>
    </div>
    <!--
    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </p>
    -->
    <!-- jackbook.com part 1 ends -->
    <!-- actually i almost do nothing with your template, just add that comment, you did it :) -->

    <div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
    <h3 id='hoverme' style='display:block;'>
    <img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
    </h3>

    <!-- this iframe below is your comment form. you can change the height, or add more style property into it -->
    <div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
    <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
    <br/>
    <a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
    </div>
    <!-- end of iframe -->

    </div>

    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
    <b:if cond='data:post.showBacklinks'>
    <b:include data='post' name='backlinks'/>
    </b:if>
    </div>
    </div>
    </div>
    </b:includable>

    上面紅字部份,你可以自行修改自己所想要的圖片連結,Josh我就自己改了一個圖片,當然也可以純文字取代。
  3. 將下列程式放到</body>的上方,</body>通常位於文件的倒數第二行
    <!-- www.jackbook.com -->
    <!-- this to hide and show el -->
    <script languange='javascript'>
    function showcomment(a,b){
    var jackbookdotcom = document.getElementById(a);
    jackbookdotcom.style.display = 'none';
    jackbookdotcom = document.getElementById(b);
    jackbookdotcom.style.display = 'block';
    }
    </script>
    <!-- www.jackbook.com -->
  4. 尋找下列程式片段
    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1
    <data:top.commentLabel/><b:else/><data:post.numComments/>
    <data:top.commentLabelPlural/>
    </b:if></a>
    </b:if>
    </b:if>
    </span>
  5. 以下列程式取代
    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.url + "#comments"' >
    <b:if cond='data:post.numComments == 1'>1
    <data:top.commentLabel/><b:else/><data:post.numComments/>
    <data:top.commentLabelPlural/>
    </b:if></a>
    </b:if>
    </b:if>
    </span>
  6. 儲存你的Template,進入文章內部看看留言方式的變化吧!!
這個方法雖然複雜,但是卻和我所想要的結果一樣,往後再也不用在視窗(分頁)之間切換,就能留言。看到這,順便到下面留言試試吧!!

關於無腦安裝的更新

於有太長的一段時間沒在進行,這一次一次全部解決,更新的部份如下:
  1. Blogger-ext部份:

  2. 繼續閱讀懶人加強版部份: