Gần đây Blogger đã cho ra hệ thống comment phân cấp cho người dùng. Tuy nhiên những mặc hạn chế của hệ thống này có thể nói là rất nhiều: n...

Gần đây Blogger đã cho ra hệ thống comment phân cấp cho người dùng. Tuy nhiên những mặc hạn chế của hệ thống này có thể nói là rất nhiều: như làm blog chậm hơn, SEO yếu hơn, chỉ có 2 cấp, khó tùy biến...
Chúng ta cần cái gì đó tốt hơn
Vnblogspot đã xuất bản hệ thống comment phân cấp tại trang Tiếng Anh với rất nhiều các đặc tính rất hấp dẫn. Chúng ta có thể gọi hệ thống này là VinaLuv. Và dưới đây là các điểm nối bật của hệ thống này:
- Load nhanh: vì không dùng full feed
- SEO tốt: vì tận dụng HTML để sắp xếp chứ không sinh comment 100% bằng Js như Blogger.
- Nhiều level: bao nhiêu do bạn chọn (mặc định 6 cấp)
- Form comment nhúng: không cần popup, không bị chặn cookie.
- Nổi bật comment tác giả: tô nền comment tác giả với màu vàng nhạt
- Hỗ trợ hình mặt cười: nếu thích bạn có thể định nghĩa lại các hình khác.
- Tự động thay URL: các URL image và Youtube sẽ tự động chuyển thành hình thật và video.
- Thiết kế bắt mắt
Hướng dẫn
Truy cập phần "Chỉnh sửa HTML" cho Template của blog bạn. Nhớ check "Mở rộng mẫu tiện ích" trước khi làm.
Tìm trong template các đoạn code:
<b:include data='post' name='threaded_comments'/>Tìm thấy cái nào thì thay cái đó bằng
<b:include data='post' name='comments'/>Sau đó nhập địa chỉ blog vào ô dưới đây rồi nhấn nút GET CODE
Vinaluv - Multi-Threaded Commenting Sytem Demo
Kế tiếp, tìm đoạn code A:
<b:includable id='comments' var='post'> . Gần ngay dưới đoạn code này là đoạn code B: </b:includable>Thay toàn bộ code bên trong A và B bằng đoạn code mà bạn vừa lấy được ở trên. Xong click SAVE TEMPLATE và thưởng thức thành quả.
Vui lòng nhận xét tại blog DEMO bằng Tiếng Anh. Chân thành cảm ơn các bạn.
Lịch sử xuất bản
- 06/04/2012: Ra phiên bản 1.0

tuyệt ghê, tối nay áp dụng xem thế nào !!!!!!
Trả lờiXóaRất tuyệt, cảm ơn bác Tiến. Mà thay đổi số cấp level là chỗ nào thế nhỉ ?
Trả lờiXóaChỗ này nè bác: Config.maxThreadDepth = 5
XóaThay số 5 thành số cấp mà bác muốn (cấp tính từ 0)
Bác Tiến, tem của em ko có đoạn code đầu tiên thì em phải làm thế nào?
Trả lờiXóaÝ bác là đoạn code A?
Xóako ý em là em ko tìm thấy đoạn code <b:include data='post' name='threaded_comments'/>
XóaVậy khỏi thay nhé.
XóaYeah... VNBlogspot đúng là hàng Việt Nam chất lượng cao!!!
Trả lờiXóaCám ơn bạn!
Mình thích những template như thế này: Không quá cầu kì nhưng đầy đủ tiện ích và chất lượng!.
Trả lờiXóanâng cấp thêm tự hiện nhãn Admin & Author , bắt link nhạc nữa là vô đối luôn bác Tiến.
Trả lờiXóaBlogspot bây h vô đối quá ~~!
XóaTest cái đã rồi tính tiếp :))
Trả lờiXóaCủa em nó ra như thế này: http://1.bp.blogspot.com/-EXRFIuO7vv8/Tp03W3jgVtI/AAAAAAAAAt8/91GHUWP_PQE/s1600/Nam+Lang.png
Trả lờiXóaCó cách nào khắc phục không bác?
Bác quảng cáo logo hả bác?
Xóahjc!Nhầm link ah!Xin lỗi! Đây bác ạ: http://www.webpagescreenshot.info/i/20614-47201284900am.png
XóaLỗi thế nào hả bác? Em nhìn nhưng chưa hiểu ý bác chỉ là lỗi nào?
XóaCái emo_list nó không được gọn như demo bác ạ, em nghĩ vậy :)
Xóaem cũng bị lỗi này:( đó là mấy cái mặt cười nó hiển thị lung tung ko hàng lối gì cả
Xóa1.bp.blogspot.com/-6vk4bcL52qc/T4B9vW0Rg8I/AAAAAAAAA-c/KiR41hlBBGg/s1600/Untitled-2.png
Cảm ơn hai bác, em sẽ sửa lỗi này trong đợt tới.
XóaTrong khi chờ đợi bạn Tiến sửa lỗi này trong đợt tới, mình đã thêm thuộc tính display: inline; vào trong .comment_emo{ và các biểu tượng cảm xúc trong blog mình đã hiện ngay ngắn như trong Demo. (Xin lỗi bạn Tiến vì đã múa rìu trước mắt thợ, hic)
XóaSau "display: inline" không có dấu chấm phẩy nhé. Hihi
XóaĐẹp tuyệt bác ạ, ngon lành hơn của Blogger nhiều :D
Trả lờiXóaCảm ơn bác. Hi vọng còn nhiều cái đẹp hơn.
Xóacám ơn 2 bác....sự kết hợp của 2 bác đã tạo cho em một cái CM hoàn hảo
Xóa^^....
(chắc các bác sẽ không hiểu tại sao đâu....nhưng cám ơn 2 bác rất nhìu:D )
Quá đẹp! Tốc độ load nhanh thiệt, ăn đứt cái phân cấp mặc định của blogger! Cảm ơn TienNguyen nhiều!
Trả lờiXóaVinaLuv là viết tắt của từ gì vậy bác ;;)
Trả lờiXóaThầm yêu Việt Nam đó mà ^_^
Xóacó làm đánh số thứ tự cho cái này đc ko bác
Trả lờiXóaHiện tại em không làm chức năng đó, nhìn rối rắm.
XóaChúc mừng 1 phiên bản cực đỉnh nhá ^^
Trả lờiXóaCho em hỏi xíu: đoạn mã <b:includable id='threaded_comments' var='post'> này mình có thay thế không
Trả lờiXóaKhông cần, làm theo đúng ý như hướng dẫn là được, cái nào không giống thì không làm.
XóaMình hỏi một câu hơi tế nhị một chút: Việc sử dụng code đã mã hóa thì về lâu dài có bị ảnh hưởng hay trục trặc gì không? :D
Trả lờiXóat nghĩ nếu a Tiến bị xoá tài khoản như lần trước thì chắc mấy code này cũng đi theo luôn! Nhưng khả năng đó là rất thấp, bạn cứ yên tâm mà sử dụng:)
XóaGood.Nhưng ko hợp với blog của em.
Trả lờiXóanâng cấp cái này các thim bên blog mình chắc bình luận tích cực lắm đây
Trả lờiXóaBác Tien Nguyen giúp mình đoạn css bo tròn như của bác đc ko, em mù cái này quá, chả là muốn phân biệt các cấp nhìn rõ hơn ^^
Hic, thèm cái comment này quá! phải sửa nữa rồi ^^
Trả lờiXóahay
Trả lờiXóakết nhất cái khoản chèn emo nhanh gọn và post luôn đc ảnh và video :)
Đã áp dụng thành công, rất tuyệt. Lúc trước xài cái comment phân cấp cũ, bài viết có comment trên 200 load chậm hơn cái này.
Trả lờiXóaCho mình hỏi, mình định thay tên miền cho blogspot lại phải làm lại thủ thuật này ah, có cách nào thay tên miền không phải áp dụng từng bước như trên k?
Trả lờiXóaBạn thay từ bước GETCODE là được mà!
XóaEm cũng muốn áp dụng nhưng sợ cái emo và hình ảnh video em đag dùng ko hợp :(
Trả lờiXóahic...của mình mấy cái biểu tượng icon mặt cười nó hiện lung tung ko biết tại sao nữa:((
Trả lờiXóaNếu mình muốn xóa mấy cái Icon đi được ko tiến...vì của mình nó hiện lung tung lên:(
XóaMình đã xóa bớt những biểu tượng ít dùng ở dưới dòng Emo_List để còn lại từ 10 đến 12 biểu tượng và nó đã hiện thị gọn gàng trên một dòng. Nhưng chưa đưa được Nội quy comment lên dòng phía trên dòng chứa các biểu tượng cảm xúc nên chưa đẹp lắm.
XóaTheo mình Tiến nền làm 2 phiên bản, 1 là cái core thôi để anh em tự tùy biến, và 1 là tích hợp đầy đủ.
Trả lờiXóaThế là tiện nhất :)
Có mấy lỗi javascript chà bá trên blog bác đó bác ơi.
Trả lờiXóaGiờ thiếu mỗi cách chèn emo như forum là perfect nhỉ.
Trả lờiXóaCũng thử rồi mà bảo mật của Blogger cao quá. Dùng PHP get source code không được. Đang mò thêm.
Xóagiờ Blogger đã có thể có tiếng nói rồi, Tien Nguyen đúng là Pro nhỉ
Trả lờiXóaTrên technicians Blog của em làm sao thay được code vinaluv cho comment của blog em phân cấp & reply không popup mà vẫn giữ đc những thiết kế như hiện tại hả bác Tiến.
Trả lờiXóaNói chung là cũng hơi dài dòng.
Xóabác Tiến cho em hỏi thêm là làm sao để giới hạn cho số comment vượt quá độ cao mình muốn thì nó sẽ tự overflow:auto; , em chèn vô hết rồi nhưng không hiểu sao nó không hoạt động trong vinaluv của bác.
Trả lờiXóaBlog nào vậy bác, chắc đụng CSS chỗ nào rồi.
XóaBlog http://www.blogktv.net/ đây bác, bác xem giúp em
XóaThêm cái nữa là em lỡ chỉnh CSS làm sao mà bây giờ khi Reply thì khung Reply của mình nó cũng to bằng khung đầu tiên chứ không nhỏ dần, bác Tiến chỉ giúp luôn. Cảm ơn bác.
XóaKhông truy cập được. Bác thử dùng overflow:auto!important; xem sao
XóaPhức tạp và dài dòng lắm, nhìn nó không ra thread comment nên em không hướng dẫn nha.
Xóathreaded comment new version is really good yeaa ^^
Trả lờiXóaBạn Tiến ơi,
Trả lờiXóaMuốn canh lề (justify) cho những dòng nhận xét thì thay đổi ở phần nào vậy.
Bác tìm trong code:
Xóa.comment_body p
thêm thuộc tính là : align:justify
Cám ơn bạn,
Trả lờiXóaMình chỉnh sửa được rồi.
Hì mình đang dùng nó, tuyệt vời quá, thank bạn nghe!
Trả lờiXóaTình hình là emo nào có kí tự "<" và ">" nó không hiển thị bác à :(
Trả lờiXóaVới lại không rõ là ver này bác có bỏ icon thùng rác không mà sao không thấy nhỉ :-?
Đương nhiên rồi bác, mấy ký tự đó là đặc biệt của HTML mà, bác define cái khác đi chứ.
XóaCó icon thùng rác đấy. Nếu bác làm theo thủ thuật bỏ navbar thì mất thùng rác. Qua Duy Pham blog đọc thêm phần update đi bác.
Em mới sử dụng insertBefore để move form, mãi mới fix được lỗi trên ff và opera, thì ra 2 trình duyệt này yêu cầu insertBefore phải có 2 giá trị.
Trả lờiXóaCó 1 trường hợp khi người nhận xét chưa đăng nhập và nhấn reply rồi chọn xem trước. Sẽ chuyển tới trang đăng nhập, đăng nhập xong rồi quay trở về thì url có dạng url_post#comment-form_idcomment. Bác update thêm move form cho trường hợp này.
OK, cảm ơn bác, em sẽ fix các trường hợp này. Giờ đang tập trung cho blog Tiếng Anh.
XóaHiện blog mình đang dùng Comment phân cấp của TienNguyen, nhưng có vài member nước ngoài có gửi lỗi này cho mình khi comment trên blog:
Trả lờiXóaWarning: You got threaded comment code for "vnltue.blogspot.com" but you are using it for "vnltue.blogspot.fr"!
How to fix? Access Blogger Items to get code for "vnltue.blogspot.fr"
Theo mình được biết, ở 1 vài nước thì domain blogspot.com sẽ tự động đổi thành blogspot.fr | blogspot.ca | blogspot.de .....nên code phân cấp của Tien sẽ không hoạt động đúng!
Làm thế nào để fix lỗi trên TienNguyen ui?
Trên trang BloggerItems.com đã fix rồi, bác qua đó nhé.
XóaCảm ơn bác! Nhưng bố cục của comment mới rối quá, nếu bác để nguyên như bản cũ thì tốt quá!
XóaĐây nè bác:http://www.bloggeritems.com/2012/04/vinaluv-multi-level-threaded-commenting.html
XóaCái VinaLuv Rulers là design khác mà.
Hic....Nhầm tí, mình không để ý chữ "VinaLuv Rulers"! Cảm ơn bác nhiều! :D
XóaGiá mà Blogger hỗ trợ kiểu comment form 3 khung: name/e-mail/web nữa là quá chuẩn rồi.
Trả lờiXóaBác giúp với! em paste đoạn code get được rồi Save vào thì báo lỗi sau:
Trả lờiXóaTiện ích với id "Blog1" không thể chứa phần tử: "#comment". Tiện ích chỉ
có thể chứa các phần tử b:includable
Em đã xóa hết các template cũ và dùng Mẫu Simple (Cung cấp bởi Blogger) mà vẫn bị. :(
thưa bạn , bạn làm sao rồi thì phải , phải là get code cho blog bạn rồi ---> tìm <b:includable id='comments' var='post'> Đoan GET CODE bỏ vào đây </b:includable> , chắc là bạn thay cả đoạn code chứ gì
Trả lờiXóaNếu làm ko dc bạn cho mình cho bạn cái email để gửi qua bản cái temp đó mình add vào xong sẽ trả bạn ^^ ,teencpclub@gmail.com , giúp nhau là vàng :D
Xóaem đã paste vào giữa đoạn VÀ rồi.
Trả lờiXóa(giữ nguyên 2 dòng VÀ là đúng chứ ạ ?
em đã paste code lấy được vào giữa đoạn <b:includable id='comments' var='post'> VÀ </b:includable> rồi.
Xóagiữ nguyên 2 dòng <b:includable id='comments' var='post'> VÀ </b:includable> là đúng chứ ạ ?
Đúng rồi em.
XóaVậy vẫn báo lỗi:
XóaTiện ích với id "Blog1" không thể chứa phần tử: "#comment". Tiện ích chỉ có thể chứa các phần tử b:includable
khó thật!
À, bác chưa check "Mở rộng mẫu tiện ích" trước khi làm. (expand widget template)
Xóakhông duyệt bài đăng của em hả bác ?? duyệt để em viết bài mới chứ :)
XóaĐang duyệt nè bác. Cứ từ từ vì bài viết phải điều chỉnh chút.
XóaThank bác! em sẽ thử lại.
XóaAnh ơi, làm sao để tăng kích cỡ emo lên. Vào blog em emo hiện ra bé xíu...
Trả lờiXóaEm ti`m trong code:
Xóa.comment_emo {
max-width: 1.5em;
max-height: 1.5em;
vertical-align: middle;
margin: -0.3em 0 0 0;
}
So' 1.5em la` kich' co~ cua emoticon. Tang giam cho phu` hop voi' y' em.
"This comment is from mobile"
Hà hà, làm 1 phát được luôn, bữa nào test trên IE cùi cái đã, tắt máy đi làm thui. Cảm ơn bác Tiến
Trả lờiXóaBac ui, chữ hơi to chút, sửa chỗ nào bác chỉ dùm đê, tối về em sửa cái nà
XóaChữ chỗ nào hả bác?
XóaEm sửa roài bác, đưa tất tần tật về 14px, muốn trúng cái nào thì kệ. Bây giờ chữ nhỏ lại rùi. Cảm ơn bác nhá. Hum nay mới nhớ tới cái này, :D
XóaCho mình hỏi cái comment này nó có lưu vào trong csdl ko bạn
Trả lờiXóaTuyệt đấy bác... Lâu không nghịch Blogspot thấy nhiều thay đổi thế....
Trả lờiXóaQuay đi quay lại bác đã bá đạo khoản comment box rồi :)
bác Tiến ơi, có cách nào tăng độ rộng khung comment này lên được không, bên blog em để 100% nó ngắn = 1/2 bên vnblogspot ah, nên phải tăng % lên làm cái child comment nó thụt thêm vào bên phải 1 tí chứ không ngang nhau.
Trả lờiXóaChào anh Tiến! Nhờ anh qua blog em xem giúp em sửa phân cấp comments mà sao không được anh ạ với cả cái khung comments nó cũng biến mất rồi :(.
Trả lờiXóaBlog em là http://k3nvil.blogspot.com anh vào kiểm tra giúp em sửa cái anh nhé. Cảm ơn anh nhiều. Chúc anh ngày nghỉ cuối tuần vui vẻ :)
Đã áp dụng cho blog của mình, thanks Tiến!
Trả lờiXóaCho mình hỏi thí không phải Code JavaScript đã bị mã hoá như vậy thì có khi nào nó bị hỏng code không nhĩ.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
XóaHi Wahyu,
XóaI saved emoticon in a list called "Emo_List". If you can search the "Emo_List =", then you will see emoticon symbols at the left column and its image URI in right column. Now, just change what you want.
That's a little difficult. :D
XóaNhận xét này đã bị tác giả xóa.
XóaNhận xét này đã bị tác giả xóa.
XóaJust define ":))" before ":)" in the list and the template will find ":))" first to convert to emoticon. Of course, after that, ":)" still available for the template can find and replace.
XóaIf you define ":)" before ":))" in the list, the template will replace ":)" first and of course, ":))" will become to "emoticon)" and not available for next find.
The character ">" and "<" is close and open character of HTML tags, so to prevent error, better, don't use them.
That's a smart way Wahyu.
XóaNhận xét này đã bị tác giả xóa.
XóaNhận xét này đã bị tác giả xóa.
XóaBác Tiến xem hộ em trường hợp này với. Em làm y nguyên như hướng dẫn. Khi reply thì khung comment cũng nhảy lên trên nhưng sau khi reply xong thì comment đấy vẫn xuống cuối cùng. Bác xem lỗi cụ thể tại đây giúp em với :(
Trả lờiXóaquá hay, áp dụng liền tay
Trả lờiXóahttp://www.vncode.biz
Mình sang cảm ơn Vnblogspot và bạn Tien Nguyên đã xuất bản hệ thống comment phân cấp tuyệt đỉnh này chỉ có thể dùng hai từ [Tuyệt đỉnh ]rất tiện lợi đơn giản nhưng không kém phần hiện đại ,tùy chỉnh không khó khăn Cách thực hiện dễ ràng mình đã giải quyết được khâu nuốt mất lời comment của nhiều chị em khi cài code chèn hình và video .Xin chân thành cảm ơn Vnblogspot nói chung và bạn Tien Nguyên nói riêng .Thanks !!!!!
Trả lờiXóaTB :mình có xem trong code chèn có đầy đủ chức năng nhận dạng video hình nhưng không hiểu sao mình đã thử chèn đủ cách nhưng không có tác dụng gì hoặc có thể mình làm sai hoặc còn thiếu chi đó bạn có thể chỉ dẫn cụ thể được không ?Xin chân thành cảm ơn bạn nhiều Thanks !!!!!!!!
Mình đã làm theo cách của TienNguyen nhưng vẫn ko thấy phân cấp
Trả lờiXóaĐịa chỉ blog: toan-thpt.blogspot.com
Theme: http://www.4shared.com/document/LIxy0EV6/codecomment.html
Các bạn xem giúp nhé. Thank