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

Quản trị viên tháng 3 11, 2018 #Thủ Thuật 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,...

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

Chia sẻ

Bài Liên Quan Tác Giả

Huỳnh Phụng Blogger

Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được