Tạo khung Một số lưu ý khi bình luận giống Bác Sĩ Windows cho Blogspot

Hello xin chào tất cả các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Theo yêu cầu của nhiều bạn gửi đến Bác Sĩ Windows, yêu cầu mình chia sẻ code của khung MỘT SỐ LƯU Ý KHI BÌNH LUẬN nằm trước khung bình luận trong phần bài viết của Blogspot.
Thì bài viết này mình sẽ hướng dẫn các bạn làm khung lưu ý đó. Khá đơn giản để thực hiện, cùng theo dõi nhé.

Các bước thực hiện

Bước 1. Đăng nhập trang chỉnh sửa HTML.
Bước 2. Tìm thẻ <div id='threaded-comment-form'>
Bước 3. Dán đoạn code sau vào dưới thẻ đó.
<div id='comments_rule_bacsiwindows-v2'>
<h2><i aria-hidden='true' class='fa fa-exclamation-circle' style='margin:0 10px 0 0'/>Một số lưu ý khi bình loạn</h2>
<p>Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem <a href='/rule' target='_blank'>nội quy</a>).</p>
<p>Bấm <b>Thông báo cho tôi</b> bên dưới khung bình luận để nhận thông báo khi admin trả lời.</p>
<p>Bạn có thể dùng <a href='/2017/11/mot-so-anh-dong-hai-huoc-cho-anh-em-thoai-mai-binh-loan.html' target='blank'>ảnh động</a> hoặc <a href='/p/ma-hoa-html.html' target='_blank'>mã hóa code HTML</a> để bình luận.</p>
</div>
Bước 4. Thêm CSS
/*#comments_rule_bacsiwindows-v2:before{content:'';position:absolute;bottom:-20px;left:0;border-top:20px solid #c15353;border-left:50px solid transparent;width:0;height:0;line-height:0}*/
#comments_rule_bacsiwindows-v2 {
    background: #f4f4f4;
    color: #666;
    clear: both;
    text-align: left;
    margin: 0;
    padding: 15px 20px;
    position: relative;
    border-radius: 10px 10px 0 0;
    float: left;
    width: 100%;
    box-sizing: border-box;
}
#comments_rule_bacsiwindows-v2 h2 {
    font: 500 16px Roboto;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #66689c;
    margin: 0 0 5px 0
}
#comments_rule_bacsiwindows-v2 p {
    margin: 0;
    padding: 0;
    font: 400 16px Roboto;
    line-height: 1.75
}
#comments_rule_bacsiwindows-v2 p:before {
    content: "
    \f105"
    ;
    margin: 0 10px 0 0;
    font-family: fontawesome
}
#comments_rule_bacsiwindows-v2 a {
    font-weight: 500;
    font-size: 16px
}
#comments_rule_bacsiwindows-v2 a:hover {
    text-decoration: underline
}
.comment-footer {
    float: left
}
Bước 5. Lưu mẫu... và enjoyy!

Tổng kết

Với một đoạn CSS kèm HTML đơn giản chèn trước khung bình luận, bạn đã có cho mình một Khung nội quy hoặc lưu ý khi bình luận tuyệt đẹp. Ngoài ra bạn có thể sử dụng code này vào mục đích khác như: khung thông báo, khung lưu ý trong bài viết,...
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Trả lời
      1. Mega menu anh không có responsive nên không biết có ai thích không

        Xóa
      2. Chắc có ! Không sao đâu

        Xóa
      3. Vậy để mai xem lại rồi viết

        Xóa
    2. Dạo này chăm ra bài ghê quá

      Trả lờiXóa
      Trả lời
      1. Viết bài thủ thuật thì nhanh thôi mà, bài tâm sự tản mạn mới hiếm ra :))

        Xóa
    3. Hóng a làm bài tạo diễn đàn như xưa a dùng

      Trả lờiXóa
    4. Cho em hỏi làm sao để xóa cái css này thế anh, cái đó hồi cũng có ở bsw cũ đó mà anh xóa mất rồi. Anh có sao lưu lại bài viết đó thì cho em xin
      https://i.imgur.com/xTLRj2D.png

      Trả lờiXóa
    5. Hôm nay có xổ số rồi ae ơi :v

      Trả lờiXóa
    6. Cho em xin 1 vé lk nhé anh Trường dz!
      Đã đặt cho anh
      Link: http://www.starsonit.xyz/
      Tên hiển thị: Star Sơn IT
      (chưa có tiền nên sắm tạm .xyz, tết em đổi .com nh anh!)

      Trả lờiXóa
    7. Tìm mãi mà có thấy cái div id='threaded-comment-form' đâu

      Trả lờiXóa
      Trả lời
      1. Không thấy thì tìm [tag]<data:blogTeamBlogMessage/>[/tag] rồi chèn code lên phía trên đoạn code đó nhé.
        Lưu ý: trong template có rất nhiều đoạn đó, chèn lần lượt vào trước từng đoạn cho đến khi hiện.

        Xóa
    8. Dạo này ra nhiều bài thế, hôm trc fb lỗi thấy tung phát 2,3 bài luôn. Ủa mà t k thấy GA đâu nữa rồi, ông gỡ rồi à?

      Trả lờiXóa
      Trả lời
      1. Bài copy post lẹ lắm. GA bán rồi ông.

        Xóa
      2. Ủa, để xài sau thu nhập cũng ngon mà ông.

        Xóa
      3. Lười nuôi lắm ông, với cũng không thích đặt quảng cáo :D

        Xóa
      4. Ừ thôi cũng đc, cho thêm ads thì load chậm hơn tầm 0.5s gì đó, come back phi lợi nhuận cùng t thôi :D

        Xóa
      5. Bán bao nhiêu vậy a

        Xóa
      6. 100k/theme nhé em.

        Xóa
      7. Ý em là bán GA bao nhiêu ấy

        Xóa
    9. Blog mình mất cái khung Comment, không biết làm thế nào nó hiện lại. huhu

      Trả lờiXóa
      Trả lời
      1. Để link blog mình xem.

        Xóa
      2. vanphongit.com
        Cảm ơn trước nhé

        Xóa
      3. Theme bạn đang sử dụng bị xóa hết code của phần comment rồi, đổi theme khác nhé không sửa được.

        Xóa
      4. à là vậy, vất vả kiếm được 1 theme mà giờ không dùng đc, tiết quá bạn à.

        Xóa
      5. Nếu bạn có chút kiến thức về web, bạn có thể copy code bình luận của 1 theme khác rồi chèn qua theme cũ. Cái này hơi khó đấy, không biết làm sẽ hỏng cả theme.

        Xóa
      6. Chắc bỏ vậy, mình không biết nhiều nên khó, chỉ cần một theme có font chữ dể đọc, load tốt chút, hì tìm các khác vậy.

        Xóa
      7. Chà mất cả đêm mới dò ra từng code, mỏi mắt rồi, cảm ơn gợi ý để có động lực sửa.

        Xóa
      8. Ok chúc bạn thành công.

        Xóa
    10. quên check mục thông báo để nhận tin từ BSWD.

      Trả lờiXóa
      Trả lời
      1. Bấm Thông báo cho tôi bên dưới để nhận thông báo khi admin trả lời nhé bạn.

        Xóa
    11. của em còn k có thẻ <div id='threaded-comment-form'> luôn

      Trả lờiXóa
      Trả lời
      1. Không thấy thì tìm [tag]<data:blogTeamBlogMessage/>[/tag] rồi chèn code lên phía trên đoạn code đó nhé.
        Lưu ý: trong template có rất nhiều đoạn đó, chèn lần lượt vào trước từng đoạn cho đến khi hiện.

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

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

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

      Trả lờiXóa
    15. Bác Sĩ Windows làm event tặng template của Bác đi

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

      Trả lờiXóa
      Trả lời
      1. Hình như có điều gì muốn nói :v

        Xóa
      2. Spam link thôi chứ có gì đâu ?

        Xóa
      3. Có phải là link share temp không ?

        Xóa
      4. Không, link blog mới tạo mời mọi người qua xem.

        Xóa
    17. Đệt :v
      https://media.tenor.co/images/58da3874fbf792c6682bdbb577052e9d/tenor.gif

      Trả lờiXóa
    18. - Khen du sờ đít ing lịt ?
      https://33.media.tumblr.com/e57b1b2ca747e836a8eef167cd6c068d/tumblr_nxrz19fyAx1ue9j4wo1_500.gif

      Trả lờiXóa
    19. Nô nô nồ ai can nót sờ đuýt éng lịt. Lét say việt nam eyyy
      https://media.tenor.co/images/a5dfa570b5a10f6bd837a473243d5e5b/tenor.gif

      Trả lờiXóa
    20. - Nâu nâu :v i đông sờ đuýt việt nam mi :v sờ đuýt ing lịt pờ li
      https://dantricdn.com/2017/anh-dong-hai-huoc-1-1511721153948.gif

      Trả lờiXóa
    21. Bạn Trường viết bài tạo cái lever bình luận đa cấp như của bạn đi, thấy đẹp và dể sử dụng.

      Trả lờiXóa
    22. Sao a kh seo với tên BSW nửa nhỉ cho dễ tìm

      Trả lờiXóa
    23. Chẳng phải đã làm được rồi sao, hay là spam link?

      Trả lờiXóa
    24. Chỉ giùm tui cái dòng ( PLEASE DO NOT SPAM MY BLOG. THANKS... !!! ) sao cho nó lên trên form bình luận với xem Trang của tui Thanks bạn trước nha. !

      Trả lờiXóa