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,進入文章內部看看留言方式的變化吧!!
這個方法雖然複雜,但是卻和我所想要的結果一樣,往後再也不用在視窗(分頁)之間切換,就能留言。看到這,順便到下面留言試試吧!!

24 則留言:

  1. 一直都透過 Bloglines 看,出來發個聲! 新年快樂

    回覆刪除
  2. 改成這樣的留言方式,就是為了省下另外開留言視窗的時間,雖然比不上WordPress的那種,但也想去不遠了。

    回覆刪除
  3. 可是留言很多很多很多,多到不行的時候,不就滑鼠滾到翻掉?

    回覆刪除
  4. TO szany:
    如果你是指要滾到最下面的留言表單的話,最上方不是有一個“跳至意見表單”的連結,按一下就可以了。

    回覆刪除
  5. 你好!我用了您的方式,卻只出現圖面,沒有辦法留言,我有使用懶人加強版內的繼續閱讀(不同的檢視方式,有三種:全文、摘要、標題)模式,請問這會有影響嗎?

    回覆刪除
  6. TO 炎熇兵燹:
    你沒有將“第3點”的js加入,所以才沒作用。

    回覆刪除
  7. 嗯嗯!謝謝!我知道了!
    現在又有一個小問題,我現在的意見框有出現了!但是是在畫面右邊,而不是向Josh兄的在最下面,請問是為什麼呢?
    再次打擾了,不好意思

    回覆刪除
  8. 我也試著將這樣的方法用在我的網頁上。
    askalin.blogspot.com

    我想留下原來的留言,只增加一個留言的表單。只是我抓不到單個表單,而是整個頁面的留言都會被我抓取。
    這樣就重複了,不好看。

    可以請問要怎麼像你這樣更動留言頁面的東西嗎?

    回覆刪除
  9. To 炎熇兵燹:
    在設定–意見–在彈出式視窗中顯示意見?選擇“是”

    To askalin:
    我也想只新增留言表單,只不過目前還沒有辦法做到,其實這個方法只是將原先文章頁面的留言隱藏,要將原先的留言隱藏,找<dl id="comments-block">改為<dl id="comments-block" style="overflow: hidden; height: 1px;">。

    回覆刪除
  10. 真的耶,只能處理文章頁面的,對留言頁面的沒什麼辦法。

    其實有個想法,如果能開一個iframe跟表單差不多大,當顯示留言iframe時也順便將表單的位置移到正確的位置,然後將scrolling給隱藏。(只是我還不會順便移動iframe裡頭的表單)

    沒看到的當沒看到,有點鴕鳥心態,不過希望可以成功。

    回覆刪除
  11. 感謝教學...
    想請問...
    如果...想要更改顏色或底圖之類的呢?
    謝謝喔~

    回覆刪除
  12. 請問大大要如何才能弄的跟你一樣呢
    http://cherisher-idle.blogspot.com/2008/03/ubuntugcin.html
    這是我的,弄起來就是怪怪的...
    滑鼠一經過就直接跑到iframe裡面
    而且留言的地方也在旁邊...囧

    回覆刪除
  13. 啊,對不起
    我沒仔細看清楚其他的留言
    我調好了@@

    不過還有個問題
    就是滑鼠一經過時
    就會直接跑到iframe裡面
    該怎麼弄成像大大一樣點了才會跑呢?

    回覆刪除
  14. 謝謝分享
    但我發現這麼在我的SIDEBAR就顯示不了更新的留言了~
    有方法可以幫忙一下嗎?
    THANK U!

    回覆刪除
  15. 不知是不是我的問題
    有時透過其他站連到我的網頁時
    一打開是我的網頁,但幾秒後即跳到該網頁的留言連結,但再「重新整理」後就回復正常...

    回覆刪除
  16. 很棒~

    但感覺自己的Blogger越來越複雜,開啟速度也很慢

    生怕一個不小心,所有的版面跟小玩意都要重新設定....

    so,看看就好

    回覆刪除
  17. 唉~~~昨天把備分下載了之後,測試上面的方法,改了一整天還是改不好。

    請問可以把整頁的頁面貼上來讓我們複製語法嗎?抱歉,冒昧提出這樣的建議,但是對不懂CSS&HTML的我...搞了10幾各小時還搞不定留言版真的很沮喪 >"<

    回覆刪除