2013年10月1日星期二

最新留言欄(不含網主回應)


真的很多很多網友想設定「最近的回應」欄啊,豆丁沒有使用這個功能,所以一心想偷懶不寫,但是需求太大,最後還是於心不忍^^"" 

好的~ 豆丁今天決定教大家設定「最新留言」欄,大家還可以選擇顯示留言數目,而且,應大家要求,不顯示網主自己的留言回應。(豆丁先把主題樂園文放在一邊@@,日後發文時,大家記得支持啊!)



注意1:以下教學不適用於以Google+留言的用家。關閉「Google+留言」:在管理頁面左欄按一下「Google+」,然後取消勾選啟用 Google+ 留言的方塊。)

注意2:如果大家之前試用了其他留言顯示的小工具,請先移除那個工具。


大家可以先到以下的測試版測試效果:
http://dauhahaha.blogspot.com/


參考資料:Help Blogger
http://helplogger.blogspot.com/2013/03/recent-comments-widget-with-hide-author.html

由於豆丁是參考Help Blogger的程式碼,再作少量修改,所以,想保留Help Blogger的網址。因此,大家可以看到"Recent Comments Widget"字樣,並有連結:



步驟1)請到「版面配置」,在心水位置按「新增小工具」。


步驟2)選擇「HTML/JavaScript」


步驟3)在標題輸入欄名(豆丁選用了「最新留言」作為欄名)


步驟4)複製以下的程式碼,貼到處理文字的軟件上(例如:Notepad、Word),按豆丁彩色的指示修改程式碼。

*顏色、線條款式的程式碼?請參考《Blogspot教學:為文章加框線》。

覺得困難的話,直接使用豆丁的程式碼,然後看「步驟5」吧!

*注意:記得把豆丁的〔括號教學文字〕刪除啊!


========== 程式碼開始 ==========

<style type="text/css">
.rc{margin-left: 0px;  〔這是「最新留言欄」的左空白大小〕
margin-right: 0px;  〔這是右空白大小〕
padding-top: 5pxpadding-bottom: 5px〔這是留言顯示間的距離〕
border-bottom: 1px dotted;} 〔留言顯示分隔線的粗幼與款式〕

.rc-ico img {display:none; }
.rc-header{}
.rc-header a{color: #1745FC;}  〔訪客名稱的顏色〕
.rc-body{font-style: italic; font-size: 12px;   言內容的字款大小
              color: #B78A00;  〔留言內容的顏色〕
              border: 0px dotted #FDD017;}  〔留言內容加框〕

#rcw-cr {font-family: Arial,Tahoma;font-size:7px;
padding-top:5px;display:block;} 〔"Recent Comments Widget"字樣的字款與大小〕
</style>

<script type="text/javascript">
var numRecentComments = 5;  〔留言顯示數目〕
var maxCommentChars = 50;  〔每個留言顯示的長度限制〕
var trueAvatars = true; 
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 50;
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = '[user] commented on [title]';
var txtAnonymous = ''; 
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 50; 
var getTitles = true;
var maxResultsPosts = ""; 
var txtTooltip = 'Date: [date MM-dd-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="豆丁") continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="豆丁") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>

<span id=rcw-cr><a href=http://helplogger.blogspot.ro/2013/03/recent-comments-widget-with-hide-author.html>Recent Comments Widget</a></span> 〔不想顯示"Recent Comments Widget"的話,可以刪除這個綠色部分。〕

========== 程式碼結束 ==========


步驟5)把程式碼中的「豆丁」(共出現兩次)換成你的留言名稱。



步驟6)把程式碼貼到「內容」,按「儲存」。



成功了!恭喜恭喜~~~~~


喜歡豆丁的教學,記得"like"、"+1"或與朋友分享啊~
謝謝你的鼓勵^^~





網友的溫馨提示

網友劉比蒂又細心,又熱心!她留意到有些訪客留言後又刪除留言,但卻沒有按「永久刪除」,這樣,他們的名字會繼續顯示,並且列明留言被刪除。大家如果不想刪除留言後仍然留有大名,記得選擇「永久刪除」啊!(當然,網主亦可再「永久刪除」^^~)




>> 閱讀豆丁的其他《Blospot教學》?

>> 歡迎閱讀豆丁的其他專欄:
         *《豆丁遊世界
         *《微故事@豆氏村
         *《簡單食譜
         *《嘰哩咕嚕

85 則留言:

  1. 對我嚟講,好似真係深到無朋友呀,哈哈!

    回覆刪除
    回覆
    1. 覺得困難的話,直接使用豆丁的程式碼,然後看「步驟5」吧!但記得把所有括號文字刪除。

      刪除
  2. 回覆
    1. 覺得困難的話,步驟4 直接使用豆丁的程式碼吧!
      然後看「步驟5」。
      要記得把所有括號文字刪除啊!

      刪除
  3. 即係由“(三角開引號)style type……抄到……span(三角閂引號),然後將你專為大家而插入既備註del左,又將兩次出現既豆丁改自己既用戶名就得?

    回覆刪除
    回覆
    1. 留言原來唔俾打“><”架。

      刪除
    2. 是的~ 乜留言唔俾打"><"咩?但係出現左啊@v@~

      刪除
  4. 如果有埋Blogger小圖像就更好喇! :D

    回覆刪除
    回覆
    1. 因為唔係個個訪客都係blogger,所以頭像等都唔整喇~

      刪除
  5. 回覆
    1. 覺得困難的話,步驟4 直接使用豆丁的程式碼吧!
      然後看「步驟5」。
      要記得把所有括號文字刪除啊!

      刪除
    2. 我剛follow yr instruction to do, but still have my comment ar ?

      刪除
    3. 豆丁, 我整完仲見到自己嘅留言呀....why?

      刪除
    4. 大家有沒有看步驟5?以自己的名字取代「豆丁」(共有兩次),即「cici小廚房 Cecilia」﹠「劉比蒂的blog」。要正確無誤啊!

      刪除
    5. 有跟著改喎,是否改為"劉比蒂的blog" 定話" bettylandhk.blogspot.hk" 呀? 我改左網址果個(英文的)

      刪除
    6. 我check左“劉比蒂的blog”的Recent Comments Widget的HTML碼了,真的沒有問題啊!那可能是網誌其他部分的HTML碼與豆丁用的不太相同(不同範本的項目名稱有機會不相同)。*我用的範本是「Simple」

      刪除
    7. 豆丁, 我打咗兩次「cici小廚房 Cecilia]都唔得呀, why?

      刪除
    8. 我用頂尖企業呀! 這樣點做啊?

      刪除
    9. 如果大家之前試用了其他留言顯示的小工具,請先移除那個工具,才使用豆丁這個HTML碼啊~ 另外,我試過以其他範本使用這個HTML碼,都OK~ 如果也是不行,就是一個非常複雜的HTML問題,可能要選用新「範本」啊@@

      刪除
    10. 吓,錦等我試試先,是否範本問題,thx !

      刪除
    11. 剛換左"範本" 了, 亦都更改左最新留言中的HTML (用你的FORMAT), 但都唔得啊! ANYWAY THX !

      刪除
    12. 咁奇怪,我都係用上面嘅HTML碼就得喇><

      刪除
    13. 呀!我再check你網誌的HTML碼,見到"劉比蒂的Blog "<--多左個空白位響後面啊~^^ 希望你得啦!~~~~~

      刪除
    14. 係,要今晚回來先整到lu , thx !

      刪除
    15. 整左唔得, 算了吧, 人不是完美, THX 豆丁!

      刪除
  6. 豆丁你的效率的確十分之高! 即時攪定了! 感激感激^^

    本人還有一難題希望你能看看可否解決到....
    就是像yahoo blog以往那樣假設阿"陳大文"回應了我,我只要click一下"陳大文"便能夠直接去到他的blog 可惜現在同樣做法只能去到他的google+, 如果他google+沒包含網誌的話, 跟本不能知道他的網址地址, 你有方法嗎?

    回覆刪除
    回覆
    1. 這個問題是陳大文的責任^^~ 你只好留言問他,並建議他看^^:
      《寫網誌的Google+用家不能忽略的用戶檔》
      http://seeddauding.blogspot.com/2013/09/google-plus-profile.html

      刪除
  7. 豆丁不好意思漏了一個重要問題, 我想請問一下由於每一篇文章我都包含了相片, 有時可以是數十張, 有什麼簡單方法(又或都係有按鈕)可以設定相片(均一)要"大'size又或者全都靠"左", 而不需要每次每張click一篇呢?

    回覆刪除
    回覆
    1. 我平時每次都係逐張click~ 不過,你喜歡的話,可以唔click,然後去文章的HTML頁,用replace all的方法調較圖片大小~

      刪除
    2. 請問要在那HTML那位置打replace all??

      刪除
    3. 不是打replace all,是用文字處理軟件的「replace all」function。

      如果你想blog的全部照片(新舊文章的照片)都變成一種尺碼,可以去「範本」>「自訂」>「Advanced」>「Add CSS」,加以下碼:

      .post-body img {
      width: 400px;
      height: auto;
      }

      .post table.tr-caption-container img {
      width: 400px;
      height: auto;
      }

      刪除
    4. 好多謝你教我呀! 不過當我copy以上的碼到add CSS時, 套用icon不能顯示出來啊!

      刪除
    5. 啊,因為icon也是相片~^^"" (那你會換回人手按嗎?其實我覺得Blogspot的圖片設定算是方便啊~~~)

      刪除
  8. 你這個冇自己回應的,看來更不錯,止轉用先!感激豆丁大人新教學!

    回覆刪除
  9. 豆丁:多謝你的分享! :-)

    回覆刪除
  10. 試咗...........唔知點解仲有自己嘅留言出現 , 請指教?

    回覆刪除
    回覆
    1. 你把你的HTML碼send給我看看吧。
      seeddauding@yahoo.com.hk

      刪除
    2. 我去左你的網誌度check,搵唔到recent comments widget的作者code ge?

      刪除
    3. 因為你未出呢篇blog嘅時候 , 我有朋友一早教咗我開 , 不過睇到你呢篇blog教可以不留網主回應 , 未delete 之前嘅"內容" copy 你篇HTML , 結果都係有網主回應 , 跟住又delete 番你嘅HTML碼 , 用番我朋友嘅HTML 碼呢~!!

      刪除
    4. 好好 , 咁我send 我朋友嘅HTML 碼比你 , 睇吓點改 , 可以無咗(網主回應) , 謝謝豆丁先~!!

      刪除
    5. 要先delete舊code,才可以用豆丁上面介紹的HTML碼~

      刪除
    6. 我之前delete 咗喇,試咗唔work 先轉番朋友個HTML 碼咋。

      刪除
    7. 另外有網友都唔得,唔知點解呢><...

      刪除
  11. 豆丁:多謝分享!我本來是用五味軒的,但在google搞錯咗r 味軒,但改吾到,點先可以改番呀!我直接使用豆丁的程式碼,用步驟5,」,r味軒同五味軒取代「豆丁」共有兩次,都試過,但仍出現自已的留言,吾知搞錯乜!我其實係電腦白痴,照搬咋!請幫忙!

    回覆刪除
    回覆
    1. 要修改Google+名稱,可以參考《寫網誌的Google+用家不能忽略的用戶檔》:
      http://seeddauding.blogspot.com/2013/09/google-plus-profile.html

      修改好,以新名字取代"豆丁"吧~

      刪除
    2. 我改過好多次,改的時候彈出你的暱稱違反了《Google+ 名稱政策》。想用返最初登記的英文名,但回應要過一段時間才可再改,G+有說明〝如果您的姓名確實為不可分割的字詞,請在名字欄中輸入本名、在姓氏欄中輸入半形句號 (「.」),然後提出申訴。〞但請問去那裡申訴?

      刪除
    3. Or!!!!!! 因為Google+想人地用真名,所以「豆丁」都唔可以係Google+名稱,要用英文。所以,我用的是Blogger資料(可參看《何時用Google+?何時用Blogger簡介?》:http://seeddauding.blogspot.com/2013/09/blogger-profile-google-plus.html)

      如果想用這個豆丁這個留言欄,就不可以把網誌連到Google+了。看看《何時用Google+?何時用Blogger簡介?》吧~

      刪除
  12. 豆丁呀,我連自已回應都顯示出黎,點做先可以唔顯示自已回應??

    回覆刪除
    回覆
    1. 我睇左你的網誌,見到你miss左步驟5):
      把程式碼中的「豆丁」(共出現兩次)換成你的留言名稱﹣﹣「老鴨子貓b」^^

      刪除
  13. thank you so much, 非常有用 ^^

    回覆刪除
  14. 我已成功加上最新留言, 但先前未加這程式前既留言是否唔會顯示出黎?

    回覆刪除
  15. Great ! Thanks for your teaching !

    回覆刪除
  16. Thanks a lot 豆丁, 完全成功, great!!!! :)

    回覆刪除
  17. 想請問為甚麼設定後,會先出現最舊的留言,怎樣可以更改,thanks!

    回覆刪除
    回覆
    1. Carol, 我探訪了你的blog,發現你在使用「Google+留言」功能呢。這個最新留言欄並不能顯示Google+留言的,它所顯示的都是從前非Google+的留言^^

      刪除
  18. 豆丁,

    我之前跟其他人整呢個留言, 但發覺完全冇顯示, 諗住由得佢.....

    但我又唔忿氣, 咁我而家就delete舊果個, 然後copy你呢個程式碼, 但都係冇顯示人地的留言, 點解會咁呢?

    當然唔包 〔不想顯示"Recent Comments Widget"的話,可以刪除這個綠色部分。〕啦~

    但出黎的效果, 只係顯示Recent Comments Widget, 係冇留言顯示

    之後我就delete呢句程式碼, 都係冇留言顯示, 請問可以點做呢? 謝謝!

    回覆刪除
    回覆
    1. 因為不同範本所用的HTML碼可能不相同…… *我用的範本是「Simple」

      刪除
  19. 哦.....我用的係"圖片視窗", 咁應該點改呢?

    因為我唔識呢D野, 只識copy程式碼架咋......麻煩哂~

    回覆刪除
    回覆
    1. 大概要花時間找出程式碼,豆丁生活有點忙,抱歉未能幫忙了@@

      刪除
    2. 哦.....唔緊要啦, 成日問你野都唔好意思, 先行謝謝你啦~

      刪除
    3. 唔駛唔好意思^^~ 我都想替大家分擔一點憂^^

      刪除
  20. 感恩豆丁分享
    ----------免費法律諮詢
    http://law.twdetect.org.tw

    回覆刪除

Related Posts Plugin for WordPress, Blogger...