[Blogger] 回應區分部落格作者及訪客的簡單作法

image


就目前查到的可以做出在 Blogger 系統下回覆別人的回應功能的,是 Sean 所寫的這篇:Sean's Blog: 讓Blogger 的「意見回應」可以有「作者回覆」 (最終版),很久之前有試過,但就是弄不出來,後來我大概想了一下我自己需要的東西,大概是讓我回應的區塊可以跟訪客分別出來就可以,加上我訪客留言的人不算多,我只要能即時回覆看起來其實就蠻像回覆在底下的感覺。所以我就用 CSS 和判斷式土法鍊鋼了一下,以後有時間再來研究 Sean 大所實現的功能。

剛好 Steven 大有問到,所以我就在這裡分享一下我的爛招,大家還是應該要去看 Sean 大那一篇才是王道。

一、勾選展開小裝置範本,記得備份你的版型先

二、加一個作者回應的 DIV CSS:因為我想要我回應的框框內縮一點,不然其實不加也沒關係

#comment-header-me{width:525px;border:1px solid #cccccc;padding:5px 10px 5px 10px;margin:5px 0px 5px 30px;background-color:#eeeeee;-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

三、找到 <b:loop values='data:post.comments' var='comment'>,我是加了一個判斷式 <b:if cond='data:comment.author == data:post.author'>,然後把作者回應要顯示的東西所需要的語法放在那裡面,你可以從原來的語法裡面先複製一份在判斷式裡頭再慢慢改,原來的語法就是接在 <b:else/> 後面。(紅字是加上去的判斷式,粗字是作者回應的區塊。)

<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div id='comment-header-me'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
  <div id='comment-name-url'>
  <img border='0' src='http://3.bp.blogspot.com/_iOYD41FxEhQ/SakjCQ3KvGI/AAAAAAAAB7E/Az-FXXNuQyo/S45/n1558631551_185425_2612.jpg'/>
  <a class='comments-autor-name'>吉米回應&#12299;</a> <a class='comment-permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/>
  </div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>

<b:else/>
<div id='comment-header'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='&quot;comment-&quot; + data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
  <div id='comment-name-url'>
     <!-- Fixed for display comment index -->
<div id='countcomment'>
<script type='text/javascript'> ShowCommentIndex(&#39;<data:post.id/>&#39;); </script>
</div>
<b:if cond='data:comment.authorUrl'>
  <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
  <a class='comments-autor-name'><data:comment.author/></a>
</b:if>
於 <a class='comment-permalink'><data:comment.timestamp/></a> <a class='says'>留言說&#65306;</a> <b:include data='comment' name='commentDeleteIcon'/>
</div>
<div id='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</div>
</div>
</div>
</b:if>
</b:loop>

參考參考就好,因為這基本上算是很懶惰的改法。

後記:目前已經將 Sean 大的 ar.js 做了一番修改用在弱格成功,還在實驗中,也許之後多測試之後再 Release 出來

先筆記一下目前已知問題:作者回應時若使用 <a> TAG 好像會出錯。

留言

  1. 真是感謝您還特別寫教學文.
    PS.您的效率真高.

    回覆刪除
  2. @Steven,還好啦,這不會花多少時間,貼一貼寫一寫而已,只不過我這種改法很初階,你參考參考就好,倒是之後我想花時間研究一下 Sean 那支程式怎麼裝。

    回覆刪除
  3. Re: Steven <2509895017884006308>
    Hi, 我去修改了 Sean 大的 ar.js,試用在我現在的版型,好像是可以了,不過跑起來有一點慢,而且語法改得有點爛,實驗中。

    回覆刪除
  4. 我們的版型修改太多,
    所以一些外掛失效,
    但又懶得全版砍掉重來,
    所以期待您的修改結果囉.

    回覆刪除
  5. 對了,
    最近BLOG又有了新功能,您看看.
    好像還不錯,似乎與PR值有關聯,
    但我那千瘡百孔的版型,依然不能用...

    回覆刪除
  6. Re: Steven <2399702901431667410>
    可能要看一下你的版型再來調那一支 ar.js

    回覆刪除
  7. Re: Steven <8125864468986713910>
    舊版的版型都要小改一下,新版的 Blogger 版型直接就可以用了,我也是舊版的,但我剛剛實際加上去之後,卻發現進文章顯示不出 +1 Button,但看網頁原始碼其實是在的卻沒顯示,首頁就正常,所以也還在研究當中。

    回覆刪除
  8. Re: Steven <2399702901431667410>
    你看要不要匯出你的完整版型給我,我來看看

    回覆刪除
  9. 哇哇哇,真是太感謝,
    JIMMY您真是佛心來著。
    我晚上回家再MAIL給您我的版型,
    請您診斷,感謝~

    回覆刪除
  10. Re: Steven <8125864468986713910>
    今天早上看 +1 Button 都顯示不出來,總之再觀察,穩定之後再寫文件你們再裝,可以先參考:http://www.google.com/webmasters/+1/button/index.html。

    回覆刪除
  11. Re: Steven <8125864468986713910>
    另外,Blogger 的 plusone code 是放在 sharebutton 裡面的,但沒有載入 plusone.js 需要加上去,現在發現的是這樣。

    回覆刪除
  12. Re: Steven <4941248805556752656>
    我好像還沒收到哦,你還沒寄厚?我怕漏信問一下。

    回覆刪除
  13. Hi Jimmy ,
    我是寄到jimmyyen@gmail.com這個信箱,
    我再寄一次看看...,真麻煩您了.

    回覆刪除
  14. Re: Steven <3535567104544710020>
    我的 Email 不是那個 :P
    麻煩你寄到 zeng.tw [at] gmail.com

    回覆刪除
  15. 原來如此,真是抱歉,
    重新寄出了,感謝您.

    回覆刪除
  16. Re: Steven <4409431861787680585>
    因為搶不到那個 account.... XD

    回覆刪除
  17. 呵呵...
    我當初也是搶不到stevenlin這個帳號,只好用stevenlins,
    只好自以為的想成=stevenlin"的"gmail...XD

    回覆刪除
  18. Re: Steven <525812353910286440>
    呵..
    我弄好了,回信給你了,你先試看看,如果有問題再說。

    回覆刪除
  19. 應該是我之前掛太多東西,有衝到,

    我只找到
    b:if cond='data:post.allowComments'
    .........
    .........
    h4 id='comment-post-message' data:postCommentMsg/ /h4

    但其中已有程式碼,插入下面程式後,也沒有效用,看來是不行了...
    不好意思麻煩您太多,
    看哪天我真的很閒時,乾脆整個版換掉,
    再將外掛一個一個重新加入,看看會不會有解...

    感謝您囉~

    回覆刪除
  20. Re: Steven <7173083915881885950>
    我是從你給我的版型去挑這兩行的,你有勾選展開小裝置範本嗎?
    還有一個是你開給我一個blogger管理者的帳號,我改好之後再刪掉帳號,你先看一下實作出來的樣子

    http://jimmyyen-abc.blogspot.com/2011/06/testing.html

    回覆刪除
  21. 我找到了,原來有好幾個
    b:if cond='data:post.allowComments'
    您真是太強了,感謝啊,
    我晚上回去再多試試....

    回覆刪除
  22. Re: Steven <8346730453420727236>
    你先試看看,不行再跟我說。

    回覆刪除
  23. 呵呵...
    我去了測試站作了些留言測試,
    有一些有趣的結果,您有空時看看...

    目前甲木誌是正常可用了,
    另,麻煩請您去看看甲木誌,現在速度如何?
    目前我還沒有整理(其實是我已經看不太懂了XD)

    謝謝 ^_^

    回覆刪除
  24. Re: Steven <6310606447483234752>
    速度上跟之前是差不多啦,您圖特別多的文章會慢一點,那大概可以裝一個 lazyload (一次不會全部 load 圖進來,往下拉才會 load)

    回覆刪除
  25. 太厲害了...我想像你這樣阿)))

    回覆刪除
  26. Re: 凱特打結 <7724025585549631771>
    你可以抓 Sean 大大那支 ar.js 先改改看,我有自己改的版本妳參考看看

    https://sites.google.com/site/zengtw/ar3.txt?attredirects=0&d=1

    回覆刪除
  27. 為什麼我跟著上面做法都做不到像你現在這個回應的效果?

    回覆刪除
  28. Re: 貓貞 <3893717248087333559>
    您好,我現在用的這個版型動得有點多,基本上還是使用 sean 大大的那支 ar.js 程式,不過有針對我的版型做了一番修改,我可以幫忙,不過您得把您的版型匯出來給我,我再找時間幫您處理。

    回覆刪除
  29. 吉米大大您好~我是最近才開始使用Blogger的新手
    找了很多方法不管怎麼改都沒辦法成功
    sean大的方法試了好幾次都跟普通回應一樣...
    下了ar.js放在自己空間試也還是不行"Orz
    在不知道怎麼辦的情況下逛google看到這篇文章
    覺得這樣的樣式感覺蠻不錯的~
    就照了上面方法試了一下
    做結果還是大失敗Q_Q
    能不能請您幫我看一下呢?謝謝><

    回覆刪除
  30. 奇怪?剛留的言怎麼不見了,囧?
    對不起,我再留一次QQ
    ----------------------------
    吉米大大您好~
    我是最近才開始使用Blogger的新手
    找了很多方法不管怎麼改都沒辦法成功
    sean大的方法試了好幾次都跟普通回應一樣...
    下了ar.js放在自己空間試也還是不行Orz
    在不知道怎麼辦的情況下逛google看到這篇文章
    覺得這樣的樣式感覺蠻不錯的~
    就照了上面方法試了一下
    做結果還是大失敗Q_Q
    能不能請您幫我看一下呢?謝謝

    回覆刪除
  31. Re: satoruNASI(さとるナシ) <8423256545313142785>
    hi 我是在 Blogger 的垃圾留言區找到您的留言,不曉得為什麼您的留言被 Blogger 自動阻擋了。

    其實我後來也有將 sean 大大的版本做了一些修改用在我的部落格,如果需要的話我可以幫忙看看。

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

有點誇張的準專業機.Minolta Alpha 7 (Dynax 7、Maxxum 7).2000

在 Excel 裡轉換 Unixtime 格式

Lightroom.製作並匯出 Preset