2007/10/04

為 blogger 留言區(comment) 加個對話框吧!




留言區, 如果能夠把作者及讀者留言區塊以不同格式呈現, 也能讓板面看起來生動些.

怎麼做呢? 其實就是加個背景圖, 背景色, 調一下區塊格式.





之前介紹過在留言區加大頭照的功能後, 也有朋友問起對話框的格式, 所以整理一下, 再配張對照圖, 讓有興趣的朋友參考看看.

1.先下載圖片, 然後上傳到網頁空間, 取得這兩張圖片的網址.

箭號圖片 下載網址

留言區背景圖片 下載網址

2. 然後找到 comment-body 這塊 CSS 區段, 或是相似名稱, 有些template 可能不完全一樣.

我的留言區的程式碼, 是長這樣的, 有興趣的人可以參考, 或再自行修改囉!


.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight: bold;
background: url(箭號圖片網址) no-repeat 20px 7px;
}

.comment-body {
background: url(留言區背景圖片網址) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body p {
background:#d0d0d0;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}

.comment-body-author {
background: url(留言區背景圖片網址) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body-author p {
background:#ccdacc;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}


用這張圖片來說明, 每塊程式碼名稱如 xxxxx{程式碼 }, 用圖對照, 如果想修改, 應該方便多了.


2008/04/11 更新 : 如果想讓訪客與作者有顏色區分效果, 可參考079 提供的程式碼.

謝謝cocomac的提醒.^^

步驟如下,

打勾小裝置, 在<dt class='comment-author' .....> XXXXXX </dt>之後, 加入以下程式碼.
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd> <b:else/>
<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>
</b:if>


相關文章 :

122 comments:

joycefairy 提到...

請問一下,無名小站的可以使用嗎?= =+

Skyvee 提到...

joyvefairy, 無名小站我不熟呢! { }內包的css樣式, 你倒是可以參考看看...

至於 .comment-author之類的, 應該名稱會不一樣哦!

GinOy - 歐陽 靖 提到...

真的謝謝你提供一大堆Blogger Tips啊!!
我擅自把你的Blog加入了側邊欄連結,
對於我這種CSS生手來說,真的太感謝你了!!

[ 我的 Blog ]

Skyvee 提到...

靖, 您客氣了! 您的部落格充滿神祕及設計感. 我也加入貴站連結了.

marselip 提到...

dd class='comment-body collapseable'>
data:backlink.snippet/
/dd
dd class='comment-footer collapseable'
span class='comment-author'data:post.authorLabel/ data:backlink.author//span

請問我這要怎麼貼

Skyvee 提到...

marselip, 你給的這段程式碼是body內的, 其實這邊不用更動到body區塊, 而是改head內的css區段.

marselip 提到...

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

請問這要貼拿裡 謝謝

Skyvee 提到...

marselip, 看來你的留言區格式定義比較不同,無法只是copy paste 就可修改完畢. 除了dd, dt 分別代表body, author,還要改些body的格式(如span class='comment-author') 我沒這樣改過呢!不能確定什麼方式比較好, 或許你可以請教 template 原創者?

079 提到...

你好,從你的BLOGGER技巧學到很多,要跟你說謝謝. 也在我的BLOGGER上轉貼你的連結,希望別介意,如果不妥請告知,我會將其刪除. 想請問最近使用你示範的留言區對話框,但是我回覆留言時為什麼對話框顏色並沒有不同於訪客?有空的話再麻煩你指導一下,謝謝.

skyvee 提到...

謝謝您的支持. 剛看了您的部落格, .comment-body p 與 .comment-body-author p 內的background 是設一樣的顏色, 所以會出現相同顏色哦! 也許你可以調整其中一個為 #d0d0d0

079 提到...

感謝您快速的回應.
背景色那個是我昨天再試這個問題時改的現在恢復之後,看來還是一樣.還有什麼地方要注意的嗎?

Skyvee 提到...

抱歉, 我忘了這篇其實只是針對對話框的處理方式而已, 並沒有加入 作者, 與讀者不同色的語法... 其實還要在body那邊改一段語法才能達到效果的..

079 提到...

對話框?回應區不同嗎? 不好意思傻傻分不清.那請問應該怎麼加你說的這段code? 我發現你第一次給我的回應,跟第二次給的回應背景顏色也不同,這又是為什麼? 不

079 提到...

我發現你第一次給我的回應,跟第二次給的回應背景顏色也不同,這又是為什麼?
是因為你沒登入blogger回應...我想應該是這樣吧?

079 提到...

哈!我成功了,謝謝啦.

Skyvee 提到...

是的, 如果我沒登入, 格式就會跟非作者一樣囉! 你已改成功啦 ? 恭喜囉! 那我就不再貼了! :)

079 提到...

是的我成功了,我本來想貼上我的改法在回應區,但是那語法被留言區拒絕....請問這要怎麼作才能貼能?

Skyvee 提到...

你要把< > 其中一個改成全形< , 才能貼上程式碼. 謝謝你這麼熱心分享. :)

079 提到...

我本來是這樣寫
<!-- george modify here start -->
<b:if cond='data:comment.adminClass == "blog-admin pid-1448913892"'>
<dd class='comment-body-author'>
<b:if cond='data:comment.isDeleted'>
< span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<b:else/>
<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>
</b:if>
<!-- george modify here end -->

後來發現有人這樣寫
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd> <b:else/>
<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>
</b:if>
看起來更適合分享給大家.

skyvee 提到...

george, 非常謝謝你的無私分享啊! 一直很希望大家可以互相交流呢! 感謝, 感謝!

如果有人有興趣想使用george提供的程式碼, 記得先把 程式碼中的全形 <, 改成半形 < , 再貼到部落格的模板哦!

Davin 提到...

想請教一下,
作者與讀者不同色塊的語法為何?
還請賜教!

skyvee 提到...

davin, 079 已幫忙把這段程式碼加上去了, 請參考一下. :)

Davin 提到...

TO skyvee
是這一段嗎?
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd> <b:else/>
<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>
</b:if>
.....我加上去了還是一樣耶..XD

Skyvee 提到...

davin, 這段程式碼, 要先把 小裝置選項勾選後, 加到 這段程式碼,<dt class='comment-author' .....> XXXXXX </dt>之後哦!記得, 要加在結尾詞</dt>之後.

美四勤 提到...
作者已經移除這則留言。
peggy 提到...

我的顯示好像跟上面marselip一樣,可以請問要如何才可以跟你一樣嗎?
如果全部改掉會不會有問題?

skyvee 提到...

peggy, 如果要改, 必須要研究一下完整的原始碼, 如果依marselip貼的code, 只知道幾個對應的標籤, 不敢保證改了有沒有問題呢? 如果你要試, 要先記得備分原來的 template

小E 提到...

我成功了,可是我的大頭貼和對話框擠在一起,而且我的大頭貼不像你的一樣有框框,請問怎麼修改呢?

skyvee 提到...

小e, 不知道是不是跟你另外加的那一段 CommentIndex 動態顯示留言編號的語法有衝突呢? 因為我沒加過這個效果...如果有空的話, 我也來研究看看..也許你先把留言區底色這部分的程式先移除吧!

小E 提到...

那個小玩意我是在Kaie's Blog(也有很多不錯的教學)找到的,因為不知道要怎麼做相應的修改就照搬回來,不過我把它移除後情況還是一樣呢!我看我先把大頭貼移掉好了(比較想要有底色)。

Skyvee 提到...

小E, 嗯, 通常改版久了, 東裝一個, 西裝一個,就可能有互相衝到的問題, 這個真的要花比較多時間研究呢! 祝小E期末考順利! ^^

花花 提到...

您好!!
我把標籤的問題搞定了
我還想問
張貼意見功能
視窗開啟怎麼弄的跟您一樣啊
部會顯示原本的文章
謝謝!!

Skyvee 提到...

花花,
恭喜你搞定標籤囉!
在blog的[設定]-->[意見]的頁面, 下方有個選項 [在彈出式視窗中顯示意見?] 選取[是], 就可以了!^^

cocomac 提到...

很棒的教學!
我也使用成功了!
沒看到回應的話,不知道<dt class='comment-author' .....> XXXXXX </dt>這一段要加入語法中,希望Skyvee還是在文中提一下比較好。

Skyvee 提到...

謝謝cocomac的提醒, 已加入了 ^^

ducklynn 提到...

嗚~我的箭頭就是出不來???

Skyvee 提到...

duck 你好, 因為你的 comments-block 套用的樣式是 dt class='comment-author anon-comment-icon', 而不是文章中提到的 comment-author.或許你把文章的 .comment-author 這行名稱改成你範本裡用的, .comment-author anon-comment-icon 試看看

Sai Ling 提到...

很谢谢你的分享啊!我算成功了一半吧!
请问想讓訪客與作者有顏色區分效果那个怎么放??

这个好像是HTML的??我们blogger不是css的吗?

在dt class='comment-author' ..... XXXXXX 之后是哪里啊?我找不到呢!

不好意思...再一次谢谢的的分享!!
希望看到你的回复~^^

Sai Ling 提到...

在问一个问题哦...
什么是打勾小裝置???

Skyvee 提到...

sai ling, 如果以簡體中文的介面來看, 是在布局-->修改 HTML --> 在中間偏右處, 有個 '扩展窗口小部件模板', 請打勾這個選項, 就可以找到相關程式碼了. 至於為什麼要改到html, 是因為要加入"判斷是否為作者"的這段程式.

Sai Ling 提到...

试过了..可是效果出来为什么是double comment的?就是会有两个一样的留言...@@
好乱哦@@

Skyvee 提到...

sailing, 我看你的留言框OK了, 只差背景色不一樣, 所以要在第二步驟的 .comment-body-author p { 及 .comment-body p { 中的background:#d0d0d0; 調不同顏色, 就可以出現效果了!

Sai Ling 提到...

是哦?我试下看~谢谢你哦~嘻嘻

Skyvee 提到...

sailing, 不用客氣, 歡迎常來坐坐嘍!

純白色 提到...

你好...

我的部落格所套用的版型好像很難改上這個..

我試了好久...

會有要出完整教學嗎?




..我今天還有留一個小泡泡不會出現的留言

不知道大大有沒有看到?


今天從大大的網站做了很多東西
受益不少

等我部落格完整後一定幫大大推廣貴站..

Skyvee 提到...

在看別人的程式時, 最怕看"可讀性低"的code, 但有些行家就專門寫這類的程式.你的#comments-block dt ==>應該就是comment-author ,#comments-block dd==> comment-body, 試看看!

小民布落 提到...

謝謝分享!…我的留言區改版成功!…
真高興!

不過,點了你的留言功能,
讓我又有了想加強版的衝動了!

skyvee 提到...

呵,改版有時候也需要那股衝動及那股勁的..小民布落的文章好溫馨哦!:)

小玉 提到...

你好
網路上搜尋到你的部落格後,
參考了許多花樣套用在部落格上,
嘗試著想改回應樣式
改是改好了,但是卻很奇怪。
回應區塊卻是跑出兩個出來,明明只留一篇留言。
http://hc888.blogspot.com/2008/06/blog-post.html

不知道語法是哪裡錯誤呢?

感謝~

小玉 提到...

不小心恢復了 原本樣板的回應格式
但我所張貼的語法皆是上述您所分享出來的語法,
所遇到的問題是會回應跑出兩個回應框。
(單筆留言)
另外就是顏色區域沒辦法分成兩種色塊。

skyvee 提到...

小玉你好,單筆留言出現兩次?你在改顏色那段程式碼時,有打勾小裝置嗎?顏色區分,是指作者及非作者,如果兩筆留言都是非作者,顏色會一樣.

小玉 提到...

區塊的單筆留言問題解決了。
剛試著重貼一次,沒有重覆性區塊問題,但是如是Blog擁有人回應,
照你回覆我的內容,顏色應該是別種顏色,但是剛剛測試出來卻是同種顏色。

和匿名發表者的區塊顏色是相同的。

程式碼都是原本你Blog上的

skyvee 提到...

請問你有加入最後一段程式碼嗎(comment-body-author..)??? 你的原始碼中,無論是不是作者留言,都只看到comment-body 這一段,當然不會有顏色差別啊?

小玉 提到...

幾乎一字不漏的張貼你原blog的語法了,但是就是無法顯示。真是怪怪的?!

另外看您原網頁語法的圓角試著套用看看,但是是不是ie無法顯示啊?!
但我又看你有宣告ie的語法。

作者區塊語法顏色仍無法顯示不同。

真的謝謝你回答我問題。

skyvee 提到...

圓角的確只支援FF, 所以我沒有特別提.另外,我想, 或許要請你把 dt class='comment-author'之後的程式碼,貼上來看一下,因為如果你有加入 b:if cond='data:comment.author == data:post.author' ..這一段程式碼,不可能我在你原始檔看不到 comment-body-author這個class

小玉 提到...

<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>
<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>
</dt>

看到你的說明,有一點明目出來了,
你所指示添加的位置是指你上述所貼的程式碼位置應是我現所張貼的位置區域,但原先我以為你所指的添加位置卻是css的位置。

But,程式碼看來是我搞錯區段,所以你才看不到。

所以,我是該在上述程式碼哪裡添加?!

真謝謝你。 :)

Skyvee 提到...

小玉,就加在 </dt>之後, 試看看吧! ^^

Lica Tsai 提到...

我加了,不過沒有很完美,
但已經眼花沒力了呢~

謝謝你哩 ^^
等有空再來看我到底是哪裏出了問題,
沒出現小勾勾和箭頭,
也不是圓角,超怪的哩

你們家真棒,幫部落格生色不少耶 ^^

Skyvee 提到...

Lica你好,
1. 在 .comment-body-author p {
XXX}及.comment-body p {XXX}中各加入這行 -moz-border-radius: 15px;
就能出現圓角, 不過在IE下是看不到的.^^
2. 箭號的部份,必須在dl id='comments-block '中, 將 dt class='comment-author blogger-comment-icon',改成dt class='comment-author', 這樣才會套到我們自訂的格式.請試看看!

PS.你的blog 很有溫馨的感覺哦!

Lica Tsai 提到...

哇,謝謝你,等有空再來試。那天為了改顏色和加小東西搞了很久,還好,雖然不是和你的一模一樣的有可愛勾勾對話框,但成效還不錯呢~感謝你啊!我先把它變成圓角了^^小勾勾改天再來好好對付它。我要來去歐歐睏了~

而且,在我家看到你的圖像很開心,沒想到你這麼細心還來我家幫我看,感恩啊~

謝謝你哦!!

Skyvee 提到...

Lica,不要那麼客氣啊!等你要改那個勾勾時,有問題,也歡迎提出來一起研究!^^ 看你的文章,覺得好輕鬆哦!

阿厝 提到...
作者已經移除這則留言。
阿厝 提到...

您好,小弟的模版裡沒有
.comment-author
.comment-body
.comment-body p
這三個東西,但是我只改了另外兩個(照您的方法),網誌現在變得很奇怪
小弟網誌http://twpo-an.blogspot.com/
另外就是如果想讓作者和訪客顏色不同,
但小弟的模版裡沒有
[dt class='comment-author' .....> XXXXXX [/dt>
這個東西,請問一下要怎麼辦呢?
提供小弟改變之前的模版下載
http://www.badongo.com/file/10904867

抱歉問題有點多,感謝您的回覆

skyvee 提到...

阿厝你好,是否有原始版型可看一下? 就是你下載的模版,應該是長什麼樣的頁面? 因為我不知道原始網頁板型,無法確認所謂的奇怪是什麼意思呢?

阿厝 提到...

skyvee您好,小弟目前的部落格就是之前的版型(我套用了上個回覆裡www.badongo.com...那個免費空間裡面的)。
如果要對照使用您的方式改動之後的模版在這裡http://www.badongo.com/file/10910507 可以下載。
麻煩您了,感謝

阿厝 提到...
作者已經移除這則留言。
阿厝 提到...

先跟skyvee前輩說聲抱歉,因為小弟讓您浪費時間了。>"<

我有先改了comment-body-author了
但綠色箭頭似乎還是沒出來。
ps.我第一個回覆的tw-po..部落格是改了之後沒動(所以才覺得亂)。
第二個回覆(含現在)的tw-poan...是還原成還沒套用此語法的。
(給您參考一下,再度說聲抱歉orz)

skyvee 提到...

阿厝,請不要這麼客氣, :) . 箭號的部份,必須在dl id='comments-block '中, 將 dt class='comment-author blogger-comment-icon',改成dt class='comment-author', 這樣才會套到我們自訂的格式囉!請試看看!

小束 提到...

請教skyvee格主~
我在加上079 提供的程式碼後 留言會重複出現兩個呢
像這樣:http://jessieshu.blogspot.com/2008/08/blog-post.html

小束 提到...

不好意思, 我修正好了唷~原來是因為以前我曾經參考別的文章將作者的回應字體與其他人的不同色, 所以出現了兩個去定義dd class='comment-body'...我把另一個拿掉後就只顯示一個留言了^^

阿厝 提到...

您好,小弟的模版裡面似乎沒有您說的comment-blogger...這個部份,我貼一下我的dl區塊給您參考一下
感謝您!

Skyvee 提到...

希望你的情形跟Lica一樣,我試了你的xml,改一些code後,找到解了.請你把<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
這段改下如下,
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>,應該就成了!其中全形<記得換成半形<

Skyvee 提到...

小束,太好了,你自己解決了! ^^

阿厝 提到...

還是沒有成功...orz我在想會不會是我換了draft的新意見回應格式(內嵌式表單,熊熊找不到參考文章抱歉)的緣故。現在不追求小箭頭了,只要能讓作者和訪者顏色不同就好了。可以請教您這一部份嗎?
(因為我有些地方跟文章中的不太一樣,不曉得要怎麼改)

感謝您的回覆!

Skyvee 提到...

阿厝,文章中的步驟一要先下載圖片, 然後找到網頁空間放了之後,取得圖片網址,把圖片網址放進步驟二的程式碼,
.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight: bold;
background: url(箭號圖片網址) no-repeat 20px 7px;
}
這段程式碼,再回貼到你的cSS區段,就可以了.箭號跟內嵌意見表單並不衝突.

阿厝 提到...

先謝謝您的熱心回覆。
這段程式碼在您先叫我試試綠色箭頭的時候就已經改好了喔,請看目前我模版裡面的:
.comment-body-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight: bold;
background: url(http://lh3.ggpht.com/TPoAnn/SKcglT2G0zI/AAAAAAAAAXk/aG6dyMDUfoQ/comment_arrow.gif) no-repeat 20px 7px;
}
.comment-body-author p {
font-size:100%;
margin: 0 0 .2em 0;
color:red;
text-decoration:bold;
}

另外您叫我改的<dt class='comment-author' expr:id='"comment-" + data:comment.id'>我也有改,再次謝謝您!

Skyvee 提到...

阿厝,應該是我沒說清楚,抱歉.想出現箭號,要改的是comment-author, 不是.comment-body-author {}, 而且dt class='comment-author' 這段,就是在套comment-author的樣式. 要不要再試看看?

阿厝 提到...

感謝您的幫忙,終於成功了~(泣)
不過現在有個小問題,我想改作者部份,讓它有框框(虛線框)。
這樣要怎麼改呢?我的想法是把comment-body-author p{}裡面加上
border-style: dashed;
border-width: 3px;
但似乎沒有成功。另外,.comment-body-author {}這個部份的背景要拿掉嗎?因為我只想讓作者回應部份呈現整個虛線方框的樣子,真的麻煩您了!

阿厝 提到...

問題解決了。加入097的程式碼之後發生跟小束一樣的問題,已經照著小束說的刪除多餘的comment-body...以上感謝小束和097。
最後當然是感謝每天都很熱心助人的Skyvee前輩!:)
分享一下改完的成果
我自己有改了一些css參數。

阿厝 提到...

抱歉不是097是079!orz

Skyvee 提到...

剛連到阿厝的blog去, 煥然一新耶! ^^

阿厝 提到...

囧,沒有Skyvee前輩的幫忙,是不可能達到的!
在此也鄭重向各位推薦 "Fun New Run High"
!(大拇指)

Quintin 提到...

謝謝大家的討論和提供解決方法!我依照Skyvee和阿厝、小束之間的問與答,也成功套用了這個對話模板的功能~~謝謝囉!

Skyvee 提到...

Quintin,恭喜你改版成功! ^^

QQ冰冰 提到...

參考您的教學加進對話框囉,謝謝您..^^

可惜目前沒有留言,看不到對話框..^^"

Skyvee 提到...

冰冰,剛過去你家留言了,對話框配色配的不錯哦! ^^

LuLuDaMa 提到...

想要改進回應樣式很久了!

用了您的程式碼,成功了!大感謝!^__^

skyvee 提到...

魯拉圖,不客氣.^^ 您的網誌內容很有趣哩!

小白 提到...

我也跟某些網友一樣,
在</dt>打入板大說的程式碼後,
會出現兩個留言,
直覺的刪了原本在</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>
再貼上板大說的程式碼,
就正常了,
有不正確的地方再請板大給我指正呀!

順道一提,我的CSS的comment-body-author
跟.comment-body-author p 本來程式裡沒有,
我就自己加進去。

感覺上我很像在做實驗,
哈哈...因為我程式不是很懂...

skyvee 提到...

小白 重覆出現留言,的確可以這麼處理.因為大家的版型不見得完全一樣,所以有時不會有這問題. :) 你的blog 設計得很好,很活潑哩!

小白 提到...

嘿嘿..謝謝你的稱讚啦!
為了弄這個blog也爬文不少,
東拼西湊弄到我要的功能,
不過blogger的社群感似乎沒有無名強,
沒有一個主站頁面來推銷,
一切都要靠自己(當然還有google引擎 :P)
目前比較困擾我的是經測試後,
"最新回應"似乎會拖慢網頁速度1秒左右,
我是使用"LVCHEN: 最新回應安裝程式v2.0 ",
測試工具是http://www.webslug.info/index/single
skyvee你用的是內建的嗎?會有更新速度的問題嗎?
想找一個速度快又可即時更新的最新回應呀!

小白 提到...

呵呵...我又來了!
我用firefox的去測了我的blog
總速度是18.99s,檔案大小是18.99kb
也測了一下你的速度也是差不多..XD
有一件奇怪的事是
我跟你的blog都會去讀一個不存在的檔(如下),而花很多時間...而google也查不到相關資料...
https://www.blogger.com/img/cmt/comment_sprite.png

skyvee 提到...

小白,我現在用的最新回應是blogger內建的,更新很慢..(自個家的反而會delay ~,~),之前用過堯的, 很快. http://jinyaolin.blogspot.com/2006/11/bloggerbeta.html.不過blogger每次改版老是亂改一些東西,有時候會影響.

另外你說的這個網址是 http://www.blogger.com/img/cmt/comment_sprite.png, 是一些背景圖.

小白 提到...

原來是背景圖,
想說xml裡怎麼樣都找不到...
我今天拿掉"cbox的留言板"跟把"博客來的廣告由flash換成imahe",開網頁速度快了不少耶!
再用firefox的firebug去測大約多是5秒左右...好高興呀!
對了,請教一下關於"張貼意見",
是否能像其他部落格在填寫文字的表格內加底圖呢?

Davin 提到...

To 小白:
最新回應的外掛,建議你可以參考Abin所寫的js。
讀取速度快,又能及時更新。
「最新回應」模組 (Recent Comments)

Skyvee 提到...

謝謝 Davin 的建議, Abin 的最新回應js 的確很好用. ^^

Skyvee 提到...

小白,目前blogger留言框內的背景圖還沒看過可以hack, 也許以後可以吧? :P

小白 提到...

To Davin:
謝謝!等一下就去試試!

To Skyvee:
希望各大高手可以hack成功~ 呵呵
當然如果google能自己開放就更好了!

小白 提到...

To Davin and Skyvee:
Abin 的最新回應js 果然速度很快,
不過之前刪除的文章留言會顯示出來耶!
有無解決辦法呀?

Skyvee 提到...

小,刪除的留言會顯示出來,問題是發生在blogger, 如果你要刪除某一篇文章之前, 必須自己先將該文章的留言刪除後,再刪文, 不然就會出現已刪除的文章留言居然又復活的靈異現象.

小白 提到...

to Skyvee
這樣呀!那我以後要注意了~

Skyvee 提到...

小白,是啊,這問題一開始就存在了..沒想到現在還是沒解,只好先忍耐了.

小白 提到...

我是使用「最新回應」模組 (Recent Comments),
但我發現點回應時不會跳到該文章的回應,只會跳到文章的上方...該怎麼處理呀?看了作者的文還是一頭霧水...

Skyvee 提到...

小白,把 var link = Comment.link[j].href; 這行程式改成 var link = Comment.link[0].href.replace("#c", "#comment-"); 就可以囉!

小白 提到...

成功了!~
不過一開始我換成var link = Comment.link[0].href.replace("#c", "#comment-");
他會去下載東西
我看他的link是連到www.blogger.com...
於是我又亂試把[0]換成[j]就成功了,耶~

Skyvee 提到...

小白,我貼錯了, 是把 var link = Comment.link[j].href; 這行程式改成 var link = Comment.link[j].href.replace("#c", "#comment-"); 啦...... :p

Celestine 提到...

感激你的教学~
我成功弄到了
虽然中间遇到了不少瓶颈^^

Skyvee 提到...

Celestine,
不用客氣,剛開始一定會碰上問題,但解決後,會很有成就感.也會愈改愈順. :)

小雲 提到...

Dear Skyvee,

請問要怎樣作出回應之間的分隔線?

小雲

Skyvee 提到...

小雲您好,
可以在 #comments 的CSS 區裡, 加上以下這段

border-top: dashed 1px #ccc;

其中 #ccc 代表顏色

小雲 提到...

謝謝Skyvee,

我知道要加什麼, 但不知加在哪裡?怎麼加?

小雲

Skyvee 提到...

小雲, 我沒有你的blog url, 所以我不知道你的版型及CSS語法是什麼, 你可以找一下你的blog html裡, 跟留言comment 有關的CSS語法區,加入border的設定.

pingmei 提到...

想請問skyvee...為甚麼我的部落格得留言都突然出現了2次?
我找了很久都不知道問題出在那裡~
www.webpingmei.blogspot.com
可不可以麻煩你幫我看看~
謝謝.

Skyvee 提到...

pingmei,進不去你的blog唷~ 是不是你重覆加了comment區段的程式碼,所以才會留言重覆出現?

Dada.Hsu 提到...

Skyvee你好~我之前參考這篇 "http://www.skyvee.net/2007/06/blogger-hide-fullpost.html" 做出在首頁只顯示摘要,使用上也很順利;不過最近發現瀏覽器會自動把所有文章都展開,而且沒辦法縮回只顯示摘要,Firefox 跟 Chrome 都會這樣,但 IE 仍是正常。

順帶一提,您的Blog在Firefox 4.0下也會有一樣的情況,這該如何修正呢?我找了幾種繼續閱讀的方法,還是毫無頭緒...麻煩您囉~謝謝 :)

st 提到...

Skyvee ~
我遇見一個問題..一直找不出
我試著改過,也找不出...
是網誌存檔的的樹狀結構無法收合折疊起來,應該來說
是下拉式選單跟條例的
都失去功能...
不曉得是哪出問題說
firefox或IE都是如此..
所以前來請教


(方便的話我 mail html檔給你.. )
感謝~

st 提到...

Skyvee ~
不好意思~剛已找到問題所在
就不麻煩你了
感謝^^

Skyvee 提到...

:) St, 是設定的問題嗎?
現在blogger 一直推出新功能, 有些外掛的程式碼也慢慢失效了. 如果可能, 就儘量使用blogger官方提供的功能.
如 閱讀全文, 這個收合文章全文的功能, 改用官方的 , 就能運作正常.

匿名 提到...

呵~就是使用blogger官方提供模版,
因一位網友來問我
後來發現是對方少了一行程式碼
導致網誌存檔的的樹狀結構無法收合折疊起來

原本之前我也用折疊的閱讀全文
但總覺得又累重讀取一次..
官方的好像也較快些...我也用官方閱讀全文的

st :)

pingmei 提到...

skyvee,我也不知道~但是最有我有弄到沒重疊了~感謝 ^^V

Rony 提到...

Nice post

Rihan 提到...

Awesome writing.

張貼留言

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