2008年5月17日

回覆留言:改進Blogger的留言方式

於有人問到要如何利用連結的點選來開啟/關閉載入留言頁面的iframe,在留言回的話有點麻煩,所以利用這一篇,一次交待清楚;當初在Google上找到這一個方法時,沒有花太多時間研究,就直接分享給大家,之後Josh我利用了一些時間,稍微看了一下,發現只是利用JS來改變該iframe的CSS:display屬性,稍微修改一下,就能作到開啟/關閉,以下讓我來告訴各位要如何作到。

改進Blogger的留言方式這一篇的步驟1和步驟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>


原作者只在裡面加入了紅字的部份,如果你之前曾以改進Blogger的留言方式作過修改,請先刪掉紅字部份,再依以下方法進行修改,如果沒有請直接進行以下步驟:
  1. 尋找下列程式碼:
    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </p>
  2. 以下列程式碼取代:
    <div id='comment-footer'>
    <p class='comment-footer'>
    <a onclick='showcomment(&quot;comments-block&quot;, &quot;comment-child&quot;, &quot;comment-footer&quot;);' style='cursor:pointer'><data:postCommentMsg/></a>
    </p>
    </div>

    在這主要是將<p class='comment-footer'>以<div id='comment-footer'>進行包覆,並將原本的「張貼意見」連結由呼叫popwindows改為呼叫js進行css的display屬性改變。
  3. 將下列程式碼新增到<div id='backlinks-container'>之前:
    <!-- 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: 475px; margin-bottom: 15px; background: #ffffff none; border: 1px solid #FCO;'>
    <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none; overflow-x:hidden;' width='100%'/>
    <br/>
    <div style='text-align:right;'>
    <a onclick='closecomment(&quot;comments-block&quot;, &quot;comment-child&quot;, &quot;comment-footer&quot;);' style='cursor:pointer;'>關閉表單</a></div><br/>
    </div>
    <!-- end of iframe -->

    在這就是加入以iframe載入留言視窗的語法,並加入一個「關閉表單」的js呼劍語法,其中紅字部份就是iframe的屬性設定,各位可以在這修改iframe的height、width、background等等。
  4. 改進Blogger的留言方式中,原作者以onmouseover進行呼叫js來進行css的display屬性的改變,一但變換後除非重新載入,不然是無法恢復成原先的樣式,原來的js如下:
    <!-- 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 -->

    在這裡Josh我是再增加一關閉iframe的js,如果你曾以改進Blogger的留言方式的第3步驟進行修改,請先將上面的js以下面的替代,如果沒有請將下列的js加在</head>之前:
    <script languange='javascript'>
    function showcomment(a,b,c){
    var showcommentfrom = document.getElementById(a);
    showcommentfrom.style.display = &#39;none&#39;;
    showcommentfrom = document.getElementById(b);
    showcommentfrom.style.display = &#39;block&#39;;
    showcommentfrom = document.getElementById(c);
    showcommentfrom.style.display = &#39;none&#39;;
    }
    function closecomment(a,b,c){
    var closecommentfrom = document.getElementById(a);
    closecommentfrom.style.display = &#39;block&#39;;
    closecommentfrom = document.getElementById(b);
    closecommentfrom.style.display = &#39;none&#39;;
    closecommentfrom = document.getElementById(c);
    closecommentfrom.style.display = &#39;block&#39;;
    }
    </script>
  5. 另外在Blog主頁還有一個呼叫Popwindow留言視窗的連結,由於我們已經要改為以iframe載入,所以這一個連結也需要一併改掉,也就是改進Blogger的留言方式的第4、第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.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>

    以下列程式碼取代之:
    <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. 以上完成後,往後留言者只要點選「張貼意見」,留言視窗會以iframe載入,並將原先的留言暫時隱藏,待留言完成後,點選「關閉表單」就會恢復原先的樣式,並關閉iframe。

在這回覆Idle 的留言提問,很抱歉過了二個月才給你答案。

版面做了一些小小的更動

一轉眼,這裡又荒廢了近二個月,Josh趁者今天下午的空閒,稍微改了一下版面,這一次是在原來的模版上進行,最明顯的就是在main-wrapper上增加一個toper-wrapper區塊,並將toper-wrapper分為三個小區塊,再將原先放在linkbar上的Label以及在sidebar的Recent Posts、Recent Comment移到這三個小區塊中,移除掉linkbar及sidebar中較寬的那一個區塊,並且把Label改為Label Cloud,以上就是Josh花了快三個小時的成果。

下圖為改版前的樣貌:


下圖為改版之後樣貌:

在此先跟用IE的朋友說聲抱歉,用IE瀏覽本 Blog會發生toper-wrapper和sidebar位置偏掉的情形,Josh改天再進行調整。