Loading post navigation ...
 
 

Pro page

40
Nhận xét

Modify Form Comment : Bài 11 - Gắn Tem cho bài comment đầu tiên

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Tài (roboonline.blogspot.com)
[FD's BlOg] - Tương tự thủ thuật trước, thủ thuật "Tạo màu nền riêng biệt cho các comment", hôm nay mình tiếp tục giới thiệu cho các bạn thủ thuật "Gắn tem cho bài comment đầu tiên" của mỗi bài viết. Ở bài này mình cũng dùng jQuery để chọn tag, nhưng khác với bài trước, ở bài này mình sẽ chỉ chọn 1 tag đó là tag đầu tiên.

Có 1 điểm mình chưa khắc phục được, đó là tạm thời 2 thủ thuật ở bài 10bài 11 chưa thể sử dụng chung được. Tức là không thể áp dụng cùng 1 lúc 2 thủ thuật này. Sau này mình sẽ khắc phục sau.


Đây là hình ảnh minh họa kết quả mình đã thực hiện:

☼ Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>



.comment-body.first {
background:url(http://farm3.static.flickr.com/2589/3761562886_8357d61da8_o.gif) no-repeat right top;
}

4. Tiếp tục chèn đoạn code javascript bên dưới vào sau dòng code ]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:first").addClass("first");
});
</script>

- Lưu ý : đối với 1 số template, class chứa các bài comment không phải là comment-body vì thế các bạn hãy thay đổi tên của các class chứa các comment lại cho thích hợp, khi đó thủ thuật mới hiển thị được.

5. Save template.

Chúc các bạn thành công.


Enter your mail address:

40

vietutd

Bóc tem comment đầu tiên. :)

Phan Dũng

lâu rồi mới thấy anh ghé thăm blog của em.

Em ko có áp dụng thủ thuật này cho blog, nên cái bài comment póc tem cũng hơi thiếu hoàng tráng nhỉ :)

vietutd

Ngày nào anh chả thăm, chỉ có điều anh đi nhẹ, nói khẽ, cười duyên nên ko ai biết mà thôi. :)

Tuấn P.H.A

hay quá có thể làm tem thứ 2 và 3 không anh dũng (Được voi đòi luôn cây kiếm :D)

Pika Rock

cái này mà có bộ đếm số lần bóc tem mới vui a ạ :))

★☆★ Lê Hữu Tài ★☆★

Ha ha ha... hay wá xá :X :X :X

Thanks FD nha :)

fandung

@Tuấn : tạm thời anh chưa test, nhưng có lẽ làm được

@PiKa : đếm số lần bóc tem của 1 người thì hơi bị đuối đó nha :D

Tuấn P.H.A

kekeek vậy em đợi fix rồi làm luôn vừa làm mà đúng thật làm thủ thật avatar và tem 1 lúc thì cái tem k hiện :D ...

Lê Công Tiến

Trùi, thủ thuật này vui và lạ ghê ^.^

Khách (ẩn danh)

Thủ thuật này rất hay nó kích thích mọi người xé tem và comment ! ;;)

min HMN

chà chà... để tớ thử post bài mới... ròi ai đó qua xé tem nhá :D
thanks dũng..

fandung

post đi anh xé cho :D

min HMN

ý kìa e vừa mới thử... chưa hiện đc anh dũng à...
kiểm tra class đúng là comment-body.
kiểm tra file js vs img thấy okie..
để e coi lại xem có sai sót gì k ta?

min HMN

okie... post rồi đó... anh thử qua xé coi.tiện kiểm tra luôn giúp e blog có lỗi gì k nhá :D

fandung

anh xem rồi, và có comment trả lời bên blog của em đó. em thay comment-body lại thành even

min HMN

í... em thay = even và cả cụm ol.commentlist li.even nó vẫn chưa chịu hiện...

min HMN

ái chà chà... chưa chịu lên anh dũng à..:D

Khách (ẩn danh)

À tiện thể mình gợi ý thêm là FD có thể gắn tem thêm cho các comment số tròn ví dụ 1,10,20,30... như thế nhìn sẽ đẹp hơn và sẽ khuyến khích người khác comment nhiều hơn để tới số tròn đó xé tem cho đẹp hehe ! :))

fandung

@apapa : được chứ bạn

fandung

@min HMN :em làm theo cách anh chỉ ko được ko đc à. Tại template của em đang xài nó ko giống với các template của blogger, nên hơi cực.

Em vô trong phần code template (mở rộng mẫu tiện ích), tìm tới đoạn code <data:comment.body/> xem cái class nào chứa nó , rồi thử lại xem

min HMN

class='even' id='comment'
đúng là class even...mà sao nó cũng k hiện... chà chà, uhm đúng là temp này converst từ temp wp... nên có vài chỗ k giống :D nhiều thủ thuật tìm code cũng không giống... e fai lục phần tương tự :D

fandung

vẫn không được luôn à.

em thử gửi code của em cho anh xem nào.

min HMN

okie... e đã gửi vào mail cho a rồi :D

fandung

@min HMN :anh ko xem đc cái file đưa.
nó bảo anh ko có quyền xem tài liệu này

Khách (ẩn danh)

http://docs.google.com/View?docID=0AfNci3IeBT1NZDk1N3duYl8zOGMyaG42bWhm&revision=_latest
anh thử lại = link trên :D

Khách (ẩn danh)

http://docs.google.com/View?id=d957wnb_38c2hn6mhf ơ e ktra link này vẫn xem đc mà :???

fandung

ái chà !!!
Hình như em thiếu sót cái này nè :

even.first {
background:url(http://farm3.static.flickr.com/2589/3761562886_8357d61da8_o.gif) no-repeat right top;
}

nó có dấu chấm phía trước nữa mà. tức là :
.even.first {...}

thử lại thử xem

min HMN

không phải đâu anh...
e thử có dấu . không được... nên thử xóa nó đi coi sao...vẫn không được...:D quên mất chưa remove :D anh xem coi đúng là even không? e thử even có .even cũng đâu được :D

fandung

lạ nhỉ, anh đã xem qua rồi, đúng là class even mà, tại sao lại ko được nhỉ?

min HMN

em cũng thấy lạ :D đã sửa đúng như anh chỉ dẫn... mà sao nó vẫn không hiện :D
em vừa sửa lại .even nhưng vẫn không được...
temp converst nên hơi rắc rối

fandung

@Min :Hây da... cuối cùng thì cũng được rồi
Em xem hình minh họa nài, anh lấy nguyên code của blog em đưa vô blog mới tạo, rồi mò cuối cùng cũng ra:
http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/28/09/39641248793115.GIF

Em thay lại code comment-body trong thủ thuật lại thành ol.commentlist li p , và 1 cái nữa là thêm đoạn code này min-height:50px; vào để cho hiển thị đẹp hơn, giống như bên dưới :

ol.commentlist li p.first {
background:url(http://farm3.static.flickr.com/2589/3761562886_8357d61da8_o.gif) no-repeat right top;
min-height:50px;
}

min HMN

cứng đầu quá anh Dũng...
đây là hình em chèn code :
http://lh3.ggpht.com/_R7sEGqoY0Yw/Sm8b94JcCDI/AAAAAAAAAjo/EiAPNx-6Vlw/temcomment.PNG

có sai xót gì đâu nhỉ ? mà nó vẫn cứng đầu.... nhìn cái hình anh test thì ngon quá :D

BlOg-FD

trời !!!
Em lại mắc lỗi nữa rồi, ở đây ko có "dấu chấm" em à. em nhìn xem code anh đưa, làm gì có dấu chấm trước :
ol.commentlist li p.first {...}

Em phải xác định rõ :
- Nếu nó là id thì sẽ có kí tự # đi trước.
- Nếu nó là class thì kí tự dứng trước nó là dấu chấm (.)
- Nếu nó là 1 thẻ HTML thì không có kí tự đứng trước.

Ví dụ : img, a, li, ul ...

min HMN

ồ khà khà... đúng là e lại sai ...
okie mọi thứ đã đâu vào đấy...
rất rất cảm ơn sự nhiệt tình của anh Dũng...
ô la la...ngon rồi :D

NAD

Mình làm nhưng ko thấy có tác dụng :|

MonkeyD.Pi

yes ! thansk anh dũng
cái này hay quá chời lun :))

Anime|Manga|

Con lậy pa Host j Die Hết hog còn cái link nào sống cả

[GM] Sky Dragon

Sao mình test đi tes lại mà vẫn không được ?
Bạn có thể nói rõ hơn được không ? Gửi luôn vào blog của minfht hì tốt . Cảm ơn !

Tanchau123
Tamil Solution

= ((



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home