Khung Ghi Chú Cho Blog

™» hoithanhcaygiang blog «™ Đây là một thủ thuật CSS đơn giản, nó cũng tương tự như khung thông báo. Do có nhiều bạn hỏi cái này nên mình vừa kiếm được một mẫu khá đẹp nên đăng lên luôn cho các bạn sử dụng. Vì việc có một khung ghi chú pro sẽ khiến "đẳng cấp" của bạn được nâng cao.

Demo

Để chèn phần ghi chú giống như thế này thì trong khi đăng bài bạn chuyển sang phần HTML của bài đăng (hoặc tạo mới một Tiện Ích HTML / Javascript) rồi copy + paste đoạn code bên dưới vào:

<style type="text/css">
.note{background:#FFEA97 url(http://goo.gl/w4a2f) repeat-x 0 0;color:#796100;width:83%;font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;border:1px solid #E1B500;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(http://goo.gl/6kexs) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(http://goo.gl/6kexs) no-repeat 100% 0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<div class="note"><h5>Lưu ý!</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<ul>
<li>Vivamus mattis nibh sed purus ullamcorper mollis.</li>
<li>Phasellus egestas nulla lobortis est eleifend dapibus.</li>
<li>Morbi at nisi blandit eros rhoncus gravida et quis leo.</li>
</ul><span></span></div>

Các bạn có thể sửa lại phần nội dung được tô màu cho phù hợp với nhu cầu của mình.

Chúc các bạn thành công!

 

Nguồn : noct-land.blogspot.com

Tổng hợp : Hội Thánh Cây Giang

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!