Hướng dẫn update khung bình luận blogspot kiểu mới

Chào các bạn, bây giờ là 22h30p rồi và mình vẫn đang cặm cụi update dần dần của Twitter Template version 2.5. Nhận thấy rằng còn một thứ mà bấy lâu nay rất muốn làm cho xong nhưng đều bị lỗi nhưng sau khi tìm hiểu kĩ nguyên nhân thì hiện tại mình đã chính thức update xong Comment Form (khung bình luận) lên phiên bản mới trông chuyên nghiệp hơn và chỉ có ở các Contempo Template sau này. Bài hướng dẫn thực ra đã có vài blog viết rồi những họ thường bỏ qua 1 dòng CSS nhỏ và chưa nói cách fix đối với blog dùng threaded comment cũ nên sẽ không làm được vì thế mình sẽ hướng dẫn chi tiết ở bài này nha. Trong bài viết mình có sử dụng 1 số code của blogthuthuatwin10. Nào bắt đầu thôi!

Hướng dẫn update khung bình luận blogspot kiểu mới
Cách thực hiện:
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Tìm thẻ có dạng (nằm ngay phần đầu mỗi template):
<html....>
Và thay thế bằng:
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.1.1' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Bước 3: Đây là khâu chèn CSS của đợt update lên version mới của Blogger, bạn hãy copy toàn bộ CSS sau và dán ngay sau (nhớ là ngay sau luôn nhé) thẻ <b:skin>
/* <!-- Constants --> <Variable name="damionRegular36" description="Damion Regular 36" type="font" default="400 36px Damion, cursive" hideEditor="true" value="400 36px Damion, cursive"/> <Variable name="damionRegular62" description="Damion Regular 62" type="font" default="400 62px Damion, cursive" hideEditor="true" value="400 62px Damion, cursive"/> <Variable name="playfairDisplayBlack28" description="Playfair Display Black 28" type="font" default="900 28px Playfair Display, serif" hideEditor="true" value="900 28px Playfair Display, serif"/> <Variable name="playfairDisplayBlack36" description="Playfair Display Black 36" type="font" default="900 36px Playfair Display, serif" hideEditor="true" value="900 36px Playfair Display, serif"/> <Variable name="playfairDisplayBlack44" description="Playfair Display Black 44" type="font" default="900 44px Playfair Display, serif" hideEditor="true" value="900 44px Playfair Display, serif"/> <Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true" value="15px Roboto, sans-serif"/> <Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true" value="16px Roboto, sans-serif"/> <Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true" value="italic 300 15px Roboto, sans-serif"/> <Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true" value="bold 22px Roboto, sans-serif"/> <Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true" value="bold 30px Roboto, sans-serif"/> <Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true" value="bold 45px Roboto, sans-serif"/> <!-- Variable definitions --> <Variable name="keycolor" description="Main color" type="color" default="#2196f3" value="#2196f3"/> <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" /> <Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" /> <Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/> <Variable name="body.text.color" description="Color" type="color" default="#333333" value="#333333"/> </Group> <Group description="Backgrounds"> <Variable name="body.background.height" description="Background height" type="length" min="420px" max="640px" default="480px" value="480px"/> <Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/> <Variable name="body.background.color" description="Body background color" type="color" default="#eee" value="#eeeeee"/> <Variable name="posts.background.color" description="Post background color" type="color" default="#fff" value="#ffffff"/> <Variable name="body.background.blur" description="Background blur" type="length" min="0px" max="50px" default="0px" value="0px"/> </Group> <Group description="Links"> <Variable name="body.link.color" description="Link color" type="color" default="#2196f3" value="#2196f3"/> <Variable name="body.link.visited.color" description="Visited link color" type="color" default="$(body.link.color)" value="#2196f3"/> <Variable name="body.link.hover.color" description="Link Hover color" type="color" default="$(body.link.color)" value="#2196f3"/> </Group> <Group description="Blog title" selector="div.widget.Header"> <Variable name="blog.title.font" description="Font" type="font" default="$(robotoBold45)" value="bold 45px Roboto, sans-serif"/> <Variable name="blog.title.color" description="Color" type="color" default="#fff" value="#ffffff"/> <Variable name="header.icons.color" description="Background icons color" type="color" default="#fff" value="#ffffff"/> </Group> <Group description="Tabs text" selector="div.widget.PageList"> <Variable name="tabs.font" description="Font" type="font" family="$(robotoNormal15.family)" size="$(robotoNormal15.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/> <Variable name="tabs.color" description="Text color" type="color" default="#ccc" value="#cccccc"/> <Variable name="tabs.selected.color" description="Selected color" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.background.color" description="Popup background color" type="color" default="$(posts.background.color)" value="#ffffff"/> <Variable name="tabs.overflow.color" description="Popup text color" type="color" default="$(posts.text.color)" value="#333333"/> <Variable name="tabs.overflow.selected.color" description="Popup selected color" type="color" default="$(posts.title.color)" value="#212121"/> </Group> <Group description="Posts" selector="div.widget.Blog"> <Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/> <Variable name="posts.title.font" description="Post title font" type="font" default="$(robotoBold22)" value="bold 22px Roboto, sans-serif"/> <Variable name="posts.stream.title.font" description="Post title stream font" type="font" default="$(robotoBold30)" value="bold 30px Roboto, sans-serif"/> <Variable name="posts.text.font" description="Post text font" type="font" default="$(body.text.font)" value="15px Roboto, sans-serif"/> <Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#333333"/> <Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)" value="italic 300 15px Roboto, sans-serif"/> <Variable name="blockquote.color" description="Blockquote color" type="color" default="#444" value="#444444"/> <Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070" value="#707070"/> </Group> <Group description="Search"> <Variable name="search.input.color" description="Input color" type="color" default="$(blog.title.color)" value="#ffffff"/> <Variable name="search.input.font" description="Input font" type="font" default="$(robotoNormal16)" value="16px Roboto, sans-serif"/> <Variable name="search.placeholder.color" description="Placeholder text color" type="color" default="$(blog.title.color)" value="#ffffff"/> </Group> <Group description="Sharing"> <Variable name="sharing.background.color" description="Sharing background color" type="color" default="$()" value="#ffffff"/> <Variable name="sharing.text.color" description="Sharing text color" type="color" default="$(posts.title.color)" value="#212121"/> <Variable name="sharing.icons.color" description="Sharing icons color" type="color" default="$(sharing.text.color)" value="#212121"/> </Group> <Group description="Popular posts" selector="div.widget.PopularPosts"> <Variable name="popularposts.background.color" description="Popular post background color" type="color" default="$(body.background.color)" value="#eeeeee"/> <Variable name="popularposts.byline.color" description="Popular post byline color" type="color" default="$(posts.byline.color)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="popularposts.title.color" description="Popular post title color" type="color" default="$(posts.title.color)" value="#212121"/> <Variable name="popularposts.text.color" description="Popular post text color" type="color" default="$(posts.text.color)" value="#333333"/> <Variable name="popularposts.link.color" description="Popular post link color" type="color" default="$(body.link.color)" value="#2196f3"/> </Group> <Group description="Post navigation" selector='div.blog-pager'> <Variable name="posts.navigation.link.color" description="Post navigation links color" type="color" default="$(body.link.color)" value="#2196f3"/> <Variable name="posts.navigation.link.visited.color" description="Post navigation links visited color" type="color" default="$(body.link.visited.color)" value="#2196f3"/> <Variable name="posts.navigation.link.hover.color" description="Post navigations links hover color" type="color" default="$(body.link.hover.color)" value="#2196f3"/> </Group> <Group description="Sidebar" selector="div.sidebar-container"> <Variable name="sidebar.backgroundColorTop" description="Background color (Top)" type="color" default="#f7f7f7" value="#ffffff"/> <Variable name="sidebar.backgroundColorTopHD" description="Background color (Top) - HD" type="color" default="rgba(255, 255, 255, 1)" value="#f7f7f7"/> <Variable name="sidebar.backgroundColorBottom" description="Background color (Bottom)" type="color" default="#fff" value="#ffffff"/> <Variable name="sidebar.separator.color" description="Separator color" type="color" default="#ccc" value="#cccccc"/> <Variable name="widget.title.color" description="Gadget title color" type="color" default="#212121" value="#212121"/> <Variable name="sidebar.icons.color" description="Sidebar icons color" type="color" default="#707070" value="#707070"/> </Group> <Group description="Author profile" selector='.widget.Profile'> <Variable name="profile.title.color" description="Profile title color" type="color" default="rgba(0,0,0,0.52)" value="rgba(0,0,0,0.52)"/> <Variable name="profile.text.color" description="Profile text color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/> <Variable name="profile.link.color" description="Profile link color" type="color" default="$(posts.title.color)" value="#212121"/> </Group> <Group description="Labels" selector=".widget.Label"> <Variable name="labels.text.color" description="Label text color" type="color" default="$(body.link.color)" value="rgba(0,0,0,0.54)"/> <Variable name="labels.background.color" description="Label background color" type="color" red="$(labels.text.color.red)" green="$(labels.text.color.green)" blue="$(labels.text.color.blue)" default="rgba($red, $green, $blue, 0.05)" value="#f7f7f7"/> </Group> <Group description="Attribution" selector=".widget.Attribution"> <Variable name="attribution.text.color" description="Attribution text color" type="color" default="$(body.text.color)" value="#333333"/> <Variable name="attribution.link.color" description="Attribution link color" type="color" default="$(body.link.color)" value="#2196f3"/> <Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="#707070" hideEditor="true" value="#707070"/> </Group> <Group description="Widths"> <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="284px" value="284px"/> <Variable name="content.width" description="Content width" type="length" min="600px" max="2400px" default="922px" value="922px"/> <Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px" value="117px"/> </Group> */
và thay <b:skin> thành <b:skin version='1.1.0'> nếu không làm được.
Bước 4: Tiếp đến đây là một dòng CSS vô cùng nhỏ những "rất quan trọng", nếu không có dòng này thì bạn sẽ gặp lỗi mất Comment Form đi đấy (nếu như các template mình test thì là như vậy), hãy chèn dòng này trước ]]></b:skin>
#comment-editor-src {display: none;}
Bước 5: Lưu template lại.
Kết luận:
Ok! Vậy là mình vừa hướng dẫn xong cho các bạn cách để nâng cấp khung bình luận cũ lên phiên bản mới hoành tráng hơn rồi đó. Lưu ý, do bước 1 chính là update lên phiên bản mới của toàn bộ blog nên có thể bố cục template bị thay đổi, gây lỗi. Cách duy nhất để khắc phục thì bạn phải tìm lỗi và viết lại CSS cho chúng thôi :D Chúc các bạn thành công.
Update fix lỗi: 1.Lỗi không phân cấp được Threaded Comment:
Nhờ sự làm việc quên ăn quên ngủ của Trường Nguyễn - Admin Bác Sĩ Windows thì giờ đã fix đc lỗi không phân cấp được threaded comment rồi anh em nhưng mọi người phải chuẩn bị tinh thần viết lại hết CSS phần comment nhé :3
- Tìm tất cả:
<b:include data='post' name='comments'/>
và thay thành:
<b:include data='post' name='threaded_comments'/>
2. Lỗi "A skin cannot contain the element: #comment. Only text and CDATA sections are accepted."
Các bạn xem cách fix mình ghi trong bình luận anh NAD tại đây.

69 nhận xét

  1. khung bình luận giờ phê quá anh ơi`

    Trả lờiXóa
    Trả lời
    1. Mệt mỏi là giờ phải viết lại CSS vì phải update lên bản mới mà :(

      Xóa
  2. Trả lời
    1. update có khung bình luận cũng lỗi nhiều phết

      Xóa
    2. Đúng rồi e. Nó sẽ phải nâng cấp tổng thể comment lên mà, js cũ k xài đc nữa.

      Xóa
    3. Giờ thì nếu a k nhầm thì nó chỉ phân 1 cấp như này vì js chưa xài đc, mà phân 1 lần cho đỡ, onl mobile nó đỡ chi chít vào, còn về add emoticon các thứ thì làm lại thủ công vậy :D

      Xóa
    4. BSW cũng phải làm thủ công lại đó e :d chịu khó đi nha :))

      Xóa
    5. Lười quá thì đừng update comment mới :v cứ để cũ mà xài

      Xóa
  3. Phê quá ông ê, sau 69 bài hướng dẫn trên Google thì đây là bài duy nhất làm thành công. Quá ngon, cảm ơn nhiều nhé!! :D

    Trả lờiXóa
  4. Cho padding với border-radius nhìn cho đẹp thôi nào

    Trả lờiXóa
    Trả lời
    1. Hiện giờ như này đã, mai viết lại CSS cho nóa :3

      Xóa
  5. Thread Comment này có nhược điểm là bài viết trên 200 nhận xét không có phân trang đâu nhé

    Trả lờiXóa
    Trả lời
    1. Thôi ấn xem tiếp cũng được ông ạ, mà các bài của t k bao giờ đến nổi 200 comments đâu :3 Mà chữ Trả lời ngay dưới 2 chữ Trả lời Xóa k ấn đc :v Js chèn emoticon hay biến ảnh cũng k hoạt động đc luôn rồi :(

      Xóa
    2. Đấy, thay đổi cái nó lỗi tùm lum tà la hết =_=
      Có mà fix đến tết cũng chưa xong ý :v

      Xóa
    3. Giờ k dùng đc js cũ phân cấp rồi :3 Ông cố nghiên cứu nha, hiện tại t stop tại đây thôi đã, trông đỡ hơn trước rồi :3

      Xóa
    4. Ừm, cái mới này đẹp đấy nhưng mất nhiều tính năng quá. Phải ngâm cứu bên blog test trước đã rồi mới đưa vào blog chính!

      Xóa
    5. Lão Iris chưa xài vì mất nhiều thứ của lão :3 Nếu xài bản này rồi giờ còn lại 1 cấp, chèn emoticon các thứ thì làm theo blogthuthuatwin10 chắc ok.

      Xóa
  6. Done nè. Áp dụng vào blog em lun

    Trả lờiXóa
    Trả lời
    1. Mà sao em không bỏ thanh cuộn blogger đc a nhỉ

      Xóa
    2. Tìm .comments iframe xóa thuộc tính height:235px đi em.

      Xóa
    3. Oke done thanks a Trường

      Xóa
  7. Đẹp vailone :v cơ mà blog e làm toàn lỗi :((

    Trả lờiXóa
  8. Loằng ngoằng phết, để thử, hy vọng thành công. Thanks :d

    Trả lờiXóa
    Trả lời
    1. Ok a :)) Hiện tại thì 3,4 người làm đc rồi. Mong a là người thứ 5 :)

      Xóa
    2. Chắc chắn đc, thiếu bước 4 thì ...

      Xóa
    3. T không làm b4 vẫn được nè!

      Xóa
    4. Bị báo lỗi này: A skin cannot contain the element: #comment. Only text and CDATA sections are accepted. :(

      Xóa
    5. b4 làm hay ko làm vẫn bị báo lỗi thế :|

      Xóa
    6. à hiểu rồi xóa all cái <Variable name="... trước đó đi

      Xóa
    7. À lỗi đó là do sau thẻ của a có từ khóa này [pre]<![CDATA[/[/pre]. A phải chèn toàn bộ CSS version mới vào sau từ trên thì đc a nhé.

      Xóa
    8. Theo chỉ dẫn of Cường làm ok rồi nhưng nhiều cái css khác loạn hết cả, lại phải quay lại máng lợn :(

      Xóa
    9. Đúng rồi đó a, bên trên e cũng ghi lưu ý rồi mà. Do mình phải update lên v3 thành ra CSS nó đổi hết, phần comment cũng phải viết lại css hết :(

      Xóa
  9. của mình k ẩn đc thanh scr bác ạ

    Trả lờiXóa
    Trả lời
    1. Thế bạn bỏ qua bước đó rồi làm các bước khác xem đc k? Vì cái này có thể sẽ có người làm k đc do temp lỗi hoặc thiếu thẻ. Có người thì k cần ẩn #comment-editor-src vẫn làm đc giống comment Trường Nguyễn nên bạn thử xem sao.

      Xóa
  10. Trả lời
    1. Thanks bác nhé, vẫn đang hoàn thành nốt mấy cái chèn icon :3

      Xóa
  11. của em nó hiện lên số kế hình á anh, làm sao để fix ạ
    https://www.nguyenngocquidz.tk

    Trả lờiXóa
    Trả lời
    1. Hiện lên số kế hình là sao e? A vẫn chưa hình dung ra.

      Xóa
  12. Phim con heo 18+
    [youtube]ZYJFCeQFccM[/youtube]

    Trả lờiXóa
    Trả lời
    1. Vãi lều :v Lại thách thức ae rồi!

      Xóa
  13. popular post bị lỗi kìa man

    Trả lờiXóa
    Trả lời
    1. Ơ nãy giờ t có edit gì lq đến phần đó đâu nhỉ -_- Fuck, lại bị điên chỗ nào rồi.

      Xóa
  14. Bài này đã ổn chưa vậy? tui vẫn chưa làm được :(

    Trả lờiXóa
    Trả lời
    1. Phải xem cả cấu trúc temp nữa ông nhé. Vì có nhiều temp thay đổi code phần comment form các thứ rồi thì có khi sai thẻ là không làm đc đâu. Giống như bên blog hoidap của t ấy, cùng temp twitter nhưng t đổi hết code phần threaded comment của idblanter rồi thì sẽ chưa làm đc.

      Xóa
    2. Nãy tui làm hết các bước, lưu còn chưa lưu được nữa :v

      Xóa
    3. Ông lại lỗi chỗ lưu CSS à? Vì mấy chỗ kia thì chắc k lỗi đc :3

      Xóa
    4. Ông rãnh ko? tui set admin ông cái cho ông xem bên Blog tui thử cái nha!?

      Xóa
    5. Để chiều được k? Giờ t phải tắt máy đi ngủ rồi. Có gì chiều dậy t inbox qua fb cho rồi set. À mà ông backup lại temp trước đi phòng khi lỗi còn thay lại nhé.

      Xóa
  15. Chán thật viết lại CSS mà em dùng điện thoại không viết được

    Trả lờiXóa
    Trả lời
    1. Tại vì nó phải update lên hoàn toàn version mới mà e nên sẽ gây lỗi, phải viết lại toàn bộ.

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

    Trả lờiXóa
  17. Ad ơi, bỏ cái scroll bar đi kiểu gì ạ ??

    Trả lờiXóa
    Trả lời
    1. Bạn tìm trong temp có dòng kiểu như này k?
      .comments iframe{height:...}, nếu có thì xóa đi, còn nếu k có thì thêm dòng đó vào css và đặt giá trị cho height đến khi nào mất scrollbar thì thôi.

      Xóa
  18. làm xong bị lỗi luôn a ơi :( reply cmt nó bị xuống hàng bên ngoài chứ không phải bên trong cmt của người cmt

    Trả lờiXóa
    Trả lời
    1. Đó là điều bt mà e. Lỗi là đúng r, temp bsw đợt đó cũng phải viết lại css và chỉnh lại temp chứ đâu phải thay cái đc luôn đâu e.

      Xóa
  19. Trả lời
    1. A đang tìm cách edit code tí để nó hiện thêm mục bài mới nhất kiểu kia :3

      Xóa