Trang chủ \14.8.11

Tạo mầu nền xen kẽ cho comments của blog

Ngoài việc tạo sự khác biệt cho nhận xét của tác giả bài viết hôm nay mình xin giới thiệu một thủ thuật mới Tạo mầu nền xen kẽ cho comments của blog.

comments


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.bgc1{background:#BFF}
.bgc2{background:#F4F4F4}

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head> (nếu blog bạn đã có jQuery rồi thì bỏ qua bước này).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Bước 3: Thêm đoạn mã dưới đây vào trước thẻ <b:loop values='data:post.comments' var='comment'>.
<script type='text/javascript'>var cCounter=0;</script>

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <b:loop values='data:post.comments' var='comment'>.
<script type='text/javascript'>
cCounter=cCounter+1;
var du=cCounter%2;
function addclass(a){
if(du==0){
$(document).ready(function(){
$("."+a).addClass("bgc2");
});
}
else{
$(document).ready(function(){
$("."+a).addClass("bgc1");
});
}
};
</script>
<script type='text/javascript'>addclass('<data:comment.anchorName/>');</script>
<div expr:class='data:comment.anchorName'>

Bước 5: Tìm thẻ kết thúc </b:loop> tương ứng của <b:loop values='data:post.comments' var='comment'> và thay thế thành:
</div>
</b:loop>

Thay thế #BFF#F4F4F4 thành mã màu theo ý bạn.

cCounter là biến đếm số comments, nếu áp dụng thủ thuật tạo số đếm cho comments bạn có thể ghép 2 thủ thuật làm 1 để giảm bớt code.

Hướng dẫn thủ thuật Blogger, Blogspot

41

Nhận xét
1

Rất đặc sắc ! Thank you!

Reply Xóa nhận xét
2

Rất hay đó bạn... cái này rất có ích... nhưng không biết mình thêm nhiều Script quá có làm blog chậm lại không nhỉ ???

Reply Xóa nhận xét
3

@JackBạn có thể test thử so với lúc chưa áp dụng, js này k đến nổi làm chậm.

Reply Xóa nhận xét
4

từng thấy ở đâu đó cái khung comment giống thế này, view source thì không thấy jquery mà thấy đoạn script gì đó quên mất tiêu :D

Reply Xóa nhận xét
5

@NoctNếu k dùng jQuery để can thiệp thì em chịu k tìm ra cách gì tạo background dc. Nếu có chắc dùng js để hiển thị khung comments, bác cố tìm lại blog đó xem :D

p/s: Mới tìm lại dc blog này http://shamsmi.blogspot.com/2008/07/threaded-comments-in-blogger.html hướng dẫn tạo reply theo kiểu WP, nhưng hơn 200 comments là hỏng :D

Reply Xóa nhận xét
6

đặc sắc thật,thank for share :))

Reply Xóa nhận xét
Nặc danh 14/8/11 23:12
7

Cái nest comment có nghĩ tới nhưng bắt tay làm thấy nhiều thứ+ít thời gian quá, hết thời gian chưi game d-_-b

Reply Xóa nhận xét
8

Đã +1 cho bài này :)

Reply Xóa nhận xét
9

Công nhận mấy tay Ấn Độ chất xám cũng ghớm thật đấy. Cái vụ threaded comments này cũng cần nghiên cứu thử xem có cải tiến được k, ae hợp lực đêi. :))

Reply Xóa nhận xét
10

@Huỳnh Nhật Hà Giải quyết vấn đề với bài hơn 200 comments rất khó, các trang sau URL khác nên phải refresh, còn lấy feed thì cũng chỉ 200 comments mới. Làm dc như Shamsmi cũng là 1 kỳ công rồi.

Reply Xóa nhận xét
11

Mời Duy Pham qua góp ý cho em cái templates mới này nhé =>

Reply Xóa nhận xét
12

Cái vụ xen kẽ này hình như bác Fandung cũng viết một bài cách đây lâu lâu rồi thì phải ^^!

Reply Xóa nhận xét
13

@Hody chan Thật đúng vậy, thậm trí code còn đơn giản hơn với class con trong khi mình cần phải đặt class riêng cho mỗi comment theo id. Blog Fandung quá nhiều thủ thuật trong khi mình chỉ thích những blog ít và không trùng, chắc mỗi lần có ý tưởng gì phải qua đây search trước :D

Reply Xóa nhận xét
14

@Phạm Minh Tâm Hi Tâm, trước hết mình rất ghét hành động spam của bạn. Đã có lần bạn comment xin lỗi nên mình đã đưa ra khỏi backlist nhưng rồi đâu vẫn vào đấy.

Thứ 2 temp của bạn dùng là Simple box reloaded ở địa chỉ http://subagya.blogspot.com/2009/05/blogger-free-template-simple-box.html nhưng dòng bản quyền đã bị thay đổi. Cũng là người share temp nên mình rất không hài lòng những hành động như vậy. Và mình thấy nực cười khi bạn "la làng" Nếu bạn sử dụng free templates này, xin vui lòng giữ nguyên thông tin tác giả nhé trong khi chính bạn là người ăn cắp.

Reply Xóa nhận xét
15

Kiểu comment hiện tại của bạn đẹp thật, tuy nhiên có thể làm cho các commnet reply thụt vào trong theo kiểu:

Comment 1
Reply "comment 1"
Reply "Reply comment 1"
Comment 2

Và làm được cho wordpress không?

Mình khoái cái ô comment này quá :D

Reply Xóa nhận xét
16

@Kiếm tiền trên mạng cái comment trên nó hiện không đúng như mình muốn nói, phải là:

Comment 1
->Reply "comment 1"
-->Reply "Reply comment 1"
Comment 2

Reply Xóa nhận xét
17

@Kiếm tiền trên mạng Làm reply theo kiểu WP đang là ước mơ khó thành công của Blogger bác ạ. K hiểu lắm câu "Và làm được cho wordpress không?" của bác? Là làm comments WP theo style blog em à? Nếu vậy thì dc chứ bác :)

Reply Xóa nhận xét
18

nói đến cái comment thì blogger thua xa wordpress ở chổ quản lý commnet và hiển thị comment, nếu blog mà làm được như wordpress thì bá chủ rồi còn nói làm gì nữa =))

Reply Xóa nhận xét
19

Nhận xét này đã bị tác giả xóa.

Reply
20

@@@Hody chan Thật đúng vậy, thậm trí code còn đơn giản hơn với class con trong khi mình cần phải đặt class riêng cho mỗi comment theo id. Blog Fandung quá nhiều thủ thuật trong khi mình chỉ thích những blog ít và không trùng, chắc mỗi lần có ý tưởng gì phải qua đây search trước :

Mình thì thích nhất là cái " bài viết liên quan" của cậu, rất chi là hay, đặc biệc nó rất nhẹ.

Reply Xóa nhận xét
Nặc danh 26/8/11 14:41
21

Sáng nay thấy hứng hứng nên làm cái comment nested, ai dè dễ thế không biết. :)) (nổ chút, đừng quăng gạch nha).

Reply Xóa nhận xét
22

@Tien Nguyen Với tài năng js của bác thì em tin tưởng, nhưng lại thấy câu nổ chút b-(. Chắc chỉ khả thi với bài < 200 comments.

Reply Xóa nhận xét
23

Ngày xưa biết có bạn vietwebguide, sau đó là fandung, giờ đây nhiều quá toàn anh tài đáng ngưỡng mộ: TienNguye, DuyPham, HuynhNhatHa và một bạn có blog tiếng anh nhưng là người Việt bên simplexdesign.blogspot.=D>

Hy vọng có một ngày được diện kiến, mình 7x nên cứ xưng hô bạn bè cho khỏe nếu bác nào nhiều tuổi =D> thông cảm mà bỏ qua cho nhé . Đừng :-t mình.

Reply Xóa nhận xét
24

@BloggerEm cũng mới làm quen Blogger 1 năm thôi, những ngày đầu chỉ ghé qua hon tap blog vì em thích phong cách chú trọng đến chất lượng chứ k theo số lượng của bác TA. Những blog thủ thuật của vn ngày trước em toàn thấy lấy ở các blog khác thành ra em có ác cảm với blog mà tràn ngập thủ thuật, nên toàn lang thang chém gió ở các blog WP, cảm thấy hơi lạc lõng. Sau này có Noct và Tiến Nguyễn khiến cho Blogger được nhìn với con mắt khác hơn.

Reply Xóa nhận xét
25

Mỗi người một ý thôi, với bản thân em có kiến thức thì khác, như bọn anh gà mờ thì khác e à, ví dụ blog của em là blog chuyên giới thiệu những thủ thuật mà em sáng tạo ra (do có kiến thức) còn như anh chỉ là tổng hợp lại bài bản, để ai không biết thì có thể coi như đó là thư viện tổng hợp để học tập ý mà! :)

Reply Xóa nhận xét
26

Em có một ý này.
Trong hệ thống comment của wordprees rất hay.Nếu mà mình có thể chèn nguyên cái comment của wordpress.com vào.
Frame cái coment ấy thôi ạ.Mình sẽ phải post bài cả hai nơi.Bên wordpress.com chỉ là sơ lược thui.Rôi gán cái coment đó vào phần coment của blogspot.
Em không biết code gì cả.Tự nhiên nghĩ ra.Anh thử suy nghĩ rồi giúp bọn em nhé

Reply Xóa nhận xét
27

@Ngoc.PhamproCó lẽ bạn là người vừa email cho mình nên thôi khỏi reply trả lời ở đây nữa :D

Reply Xóa nhận xét
28

Không.Em có email gì cho anh đâu.Hic.Chắc nhầm anh ạ

Reply Xóa nhận xét
29

@Ngoc.PhamproVậy bạn kia hỏi giống bạn luôn, mà mình thì cũng lười để ý tên hay blog :D. Copy luôn email mình trả lời:

"Nó cần phải có code để nhận biết tương ứng với id bài viết này thì chèn id comment nào cho phù hợp, nếu dễ dàng thì disqus lại k nổi tiếng đến vậy rồi bạn. Hiện tại thì vấn đề này vượt ngoài tầm hiểu biết của mình."

Reply Xóa nhận xét
30

@Duy Pham

À, cái này thì em hỏi bác, nhưng bác bảo nằm ngoài tầm khả năng nên em cũng thôi, chưa sờ đến phần comment của blog em nữa...
Tự nhiên cụt hứng, chưa có ý tưởng gì cho phần comment :D

Reply Xóa nhận xét
31

Duy ơi,Sao tự dưng cái Comment của mình Font chữ bé xíu,Sửa như thế nào? Help...Tks Duy.:)

Reply Xóa nhận xét
32

@Benjamin KardelBạn tìm đến .comments-body{font-size:1em;. font-size ở đây là kích thước của comments trong blog bạn, nó đang được khai báo dưới dạng tương đối, bạn có thể tăng lên thành 1.2em, 1.3em... Hoặc dùng dạng tuyệt đối là 14px, 16px...

Reply Xóa nhận xét
33

Mình sửa được rồi,Cảm ơn Duy nhiều nhé.:)

Reply Xóa nhận xét
Nặc danh 26/12/11 08:01
34

Minh muon them nut reply thi phai them kieu gi vay @DuyPham oi:((

Reply Xóa nhận xét
35

@thanh tung leÝ bạn là comments phân cấp? Xem bài viết này http://www.vnblogspot.com/2011/12/comment-phan-cap-cho-blogger.html

Reply Xóa nhận xét
Nặc danh 28/12/11 06:54
36

@Duy Pham
Thanks minh lam duoc rui :)

Reply Xóa nhận xét
37

Mình làm rồi sao không thấy gì hết :((((((((

Reply Xóa nhận xét
Nặc danh 14/3/12 13:40
38

Nhận xét này đã bị quản trị viên blog xóa.

Reply
39

bây giờ nghĩ lại thấy có phương pháp khác ngắn gọn hơn nhiều bác ạ :D

Như thế này: $('.post-body:odd').addClass('bgc2')

Reply Xóa nhận xét
40

Cái này gọn nhẹ quá, ít đụng chạm đến jQuery nên em giờ mới biết đến odd này.

Reply Xóa nhận xét
41

ko thấy ji hết :|

Reply Xóa nhận xét

Đăng nhận xét

Cancel