2008/11/13

[Blogger] 為blogger 每則留言繡上數字(Numbering comments)




有時候留言數一多,想看第幾則留言,就不是很容描述,blogger 內建並沒有為每則留言加上數字的功能,不過有些hack 程式可以達到這個目的.


這個方法除了可為留言加上數字, 點選每一個數字還可以讓該則留言置頂,方便瀏覽. 不過不是很好說明,如果大家用的範本與本例說明相差甚多,就不建議操作.

首先, 先到版面配置 --> 修改HTML --> 打勾展開小裝置範本


1. 找出 <dl id='comments-block'>,在此行之後,加入下列程式碼
<script type='text/javascript'>var CommentsCounter=0;</script>

2. 然後在<b:loop values='data:post.comments' var='comment'>之後,加入以下程式碼<div class='' expr:id='data:comment.id'>

3. 在<data:commentPostedByMsg/>之後,加入程式碼(請參考附圖的相對位置)
<span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot;+data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
</script>
</a>
</span>


點圖片可放大.(建議比照圖片中的相對位置)


4. 往下找到最近的一組</b:loop></dl>,在之前加入</div>

點圖片可放大.


5. 最後一步, 就是在 ]]></b:skin> 之前, 加入下列CSS程式碼, 也可以自己調整紅字部份.
.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px;
text-align: right; /*文字對齊*/
font-family: 'Century Gothic','Lucida Grande';
font-size: 30px; /*字體大小*/
font-weight: normal;
}

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}


儲存後,就可以看到加上數字的留言了.

參考來源: Numbering comments

相關文章 :

30 comments:

毛毛牙 提到...

這招讚!立刻學起來。

凱濕 提到...

哇 這好酷喔~~不過只能在blogger用ㄅ...><

LuLuDaMa 提到...

嗯,這裡總是有很多好物,下次來用用看!

Sango 提到...

這陣子的s大真是許多blogger教學文啊...

剛溫~剛溫...

小白 提到...

我的blogger很妙
我沒有data:commentPostedByMsg
原本要放在data:commentPostedByMsg後面的程式碼
我放在一個地方只能顯示作者的樓數(訪客跳過不計)
放另在一個地方只能顯示訪客的樓數(作者跳過不計)
兩個地方都放上程式碼就正常運作了
太好了~

小白 提到...

範例圖片裡有我的名字
不好意思!!!哈!XD

skyvee 提到...

毛毛牙,
很早以前就想加這功能,不過一直偷懶,最近有點小空閒,就趕緊研究一番.

凱濕,
這的確只適用blogger. :P

LuLuDaMa,
如果喜歡,可以試看看哦!

Sango,
其實對blogger改版這一部份,原本是不想鑽研了,最近有點自己的時間,加上突然想要加一些東西,所以又開始try了.

小白,
拍拍手!!真的好棒!你try出來了! 也謝謝你常來留言討論! ^^

JIANG JIANG 提到...

^__^ 妳真是鬼才 !

Skyvee 提到...

Jiang,沒這回事,這只是借花獻佛而已啊!還是要感謝那些原創者.

ang ang 提到...

這個好用。ang ang 也來添加。

skyvee 提到...

angang,加上編號後,留言看起來就有序多了.^^

ShengWD 提到...

這真的是很棒耶!
找個時間,也來增加看看!

Skyvee 提到...

ShengWD , 請享用! ^^

小路拔 提到...

照著你的步驟我的回應也有數字來標示了
我只能說你真是太神奇了

skyvee 提到...

小路拔,真要感謝的是有這麼多人願意在網路上分享,讓我們
受益!:)

andrew 提到...

好棒的功能, 趕快來試試

skyvee 提到...

Andrew, 試看看囉! 我個人覺得還蠻不錯的!:)

andrew 提到...

試了老半天, 終於給完成了, 感謝啦~~另外, 小弟有一個問題想請教一下skyvee兄, 小弟在文章中使用嵌入google map, 剛開始再網頁還沒跑完時顯示沒問題, 但是載入完成後會變成部落格中其他的ifrmae, 如果可以的話, 請您幫忙一下, 謝謝http://anchucheng.blogspot.com/2008/11/blog-post_27.html

skyvee 提到...

andrew , "載入完成後會變成部落格中其他的iframe" 我不明白你的意思耶. google map本來就是用iframe的方式呈現, 如果寬度太寬, 可以自訂地圖的大小. 快吃飯了,剛連到你這篇燒臘文章, 肚子好餓~ ->_<-

andrew 提到...

哈哈~~如果燒臘店離skyvee不遠, 可以去吃吃看喔~~大概是我描述的不夠清楚, 應該是說我在燒臘店地址下有一個iframe, 本來是google map的iframe, 不知為何網頁載入完成後就變成google friend connect的ifrmae, 另外剛加入不久的skyvee的"相關文章"功能也有問題, 燒臘這篇文章的標籤是只有一個, 但是卻會顯示重複的兩個, 看了老半天, 實在不知是哪裡需要調整, my god!!

skyvee 提到...

andrew的情況真詭異, 你有試著將map的iframe 語法移除,看看是否正常嗎? @,@

andrew 提到...

沒有哩~~iframe語法移除不就會有問題了?我現在會改用windows.open的方式來試試看, 謝啦

ctjh9626 班級網頁 提到...

你好~我依照上述的方法想使用
留言繡上數字
但似乎出現了一些問題

留言旁有出現數字
可是數字的上下被裁掉了

按了數字也沒有出現置頂的效果
我是使用Microsoft Visual Basic 2005
編輯的 我貼上第三步驟
(把那串貼在data:commentPostedByMsg的後面)

時他出現 "現有的編輯號碼5與'ediSpan'引述相交"
不知到哪裡出錯了或是因我的範本問題哪裡需要修改...
我對程式碼只通一竅 所以請站主幫忙解決 謝謝

Skyvee 提到...

你貼的錯誤訊息不太看得懂,你要不要用frontpage來改?這樣效果比較符合網頁的狀況.

通達人 提到...

請問一下:
我在兩個data:commentPostedByMsg後都加了程式碼,但是只有非作者的留言才有數字,作者是沒有數字的,請問要如何修正呢?
請見:http://prudentman.idv.tw/2007/11/big-endianlittle-endian.html

Skyvee 提到...

通達人,作者數字有出現啊,一共6則留言.只是數字字體太大, 或是可以調一下margin-top: -30px; 把-30改成-15看看!

Dino 提到...

你的部落格怪怪的
請看圖片

http://images.plurk.com/3185208_0704193b2aec3bb9dc68272c1d2406bd.jpg

skyvee 提到...

Dino,謝謝你這麼熱心,告知我這問題, 不知為什麼那張圖片會被卡巴視為病毒,目前已經將所有放在databus的圖片移到google sites了.

Mia 提到...

上週換blogger提供的新範本後,試了好多留言編號語法,只有你的可以在新範本中執行.感謝萬分!

Skyvee 提到...

Mia,謝謝您的留言,很高興有派上用場.:)

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.