Tạo khung "Nội Quy Bình Luận| tuyệt đẹp cho Blogspot (kiểu 2)

Chào các bạn, bài viết trước đó, Bác Sĩ Windows đã chia sẻ đến các bạn mẫu khung Nội Quy Bình Luận rồi, tuy nhiên nhìn nó không được đẹp mắt cho lắm. Nên phiên bản nâng cấp ngày hôm nay mà Bác Sĩ Windows chia sẻ đến các bạn, mẫu khung Nội quy bình luận được nâng cấp và chỉnh sửa, bổ sung thêm Font Awesome nữa tuyệt đẹp, đẹp hơn nhiều so với mẫu trước đó.

Thực chất đây chỉ là một vài dòng text, được mình thêm một tí CSS vào nhìn cho nó đẹp mắt và màu mè hơn thôi. Được chén phía trên khung bình luận của Blogspot nên bạn có thể dùng nó làm khung Nội Quy Bình Luận hoặc khung Thông báo khi nhận xét gì đó... cho blog của mình.

Cách thực hiện

Các bạn làm giống hết như bài viết này, nhưng copy code này.

<div id='comment-rule'>
<style>
#comment-rule:before{content:&quot;&quot;;content:&quot;&quot;;position:absolute;bottom:-20px;left:0;border-top:20px solid #c15353;border-left:50px solid transparent;width:0;height:0;line-height:0}
/*#comment-rule:after{content:&#39;&#39;;position:absolute;bottom:-12px;right:10px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid #e66262;left:30px}*/
#comment-rule{background:#e66262;color:white;text-align:left;margin:0 0 20px;padding:14px 20px;position:relative;border-radius:0}
#comment-rule h2{font:300 20px Roboto;text-transform:uppercase;color:#ffe978;margin:0 0 5px 0}
#comment-rule p{margin:0;padding:0;font:300 17px Roboto;letter-spacing:-.2px;line-height:1.75}
#comment-rule p:before{content:&quot;\f105&quot;;margin:0 10px 0 0;font-family:fontawesome}
#comment-rule a{color:#fff;font-weight:500}
</style>
<h2><i aria-hidden='true' class='fa fa-exclamation-circle' style='margin:0 10px 0 0'/>Một số lưu ý khi bình luậ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='https://www.bacsiwindows.com/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ình luận một đoạn code, hãy <a href='https://www.bacsiwindows.com/p/ma-hoa-code.html' target='_blank'>mã hóa code</a> trước nhé</p>
</div>

Lời kết

Đây là một khung thông báo nhỏ, nhưng nó lại giúp ích rất nhiều cho chúng ta đấy. Nếu bạn không dùng nó làm khung nội quy, bạn cũng có thể hoàn toàn dùng nó làm khung thông báo hoặc khung lưu ý,... cho blog. Nếu biết cách sử dụng hợp lý thì cái gì cũng có ích!

Code và bài viết hoàn toàn thuộc bản quyền của Bác Sĩ Windows, nếu copy bài viết vui lòng ghi rõ nguồn Bác Sĩ Windows hoặc www.bacsiwindows.com nhé.