Tạo khung ghi chú cho blog ...

Đây là một thủ thuật CSS đơn giản, nó cũng tương tự như khung thông báo. Việc có một khung ghi chú pro sẽ khiến "đẳng cấp" của bạn được nâng cao.

Demo 1

Công Ty TNHH SX TM & DV Bốn Phương

Chuyên cung ứng ...

• Văn Phòng Phẩm.
• Ván ghép gỗ cao su.
• Ván sàn gỗ cao su.

Demo 2

Công Ty TNHH SX TM & DV Bốn Phương

Chuyên cung ứng ...

• Văn Phòng Phẩm.
• Ván ghép gỗ cao su.
• Ván sàn gỗ cao su.

Để chèn phần ghi chú giống Demo 1 thì trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi copy + paste đoạn sau:

<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>Công Ty TNHH SX TM & DV Bốn Phương</h5>
<p>Chuyên cung ứng...</p>
<ul>
<li>Văn Phòng Phẩm.</li>
<li>Ván ghép gỗ cao su.</li>
<li>Ván sàn gỗ cao su.</li>
</ul><span></span></div>

Để chèn phần ghi chú giống Demo 2 thì trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi copy + paste đoạn sau:

<style type="text/css">
.note{background:#f0fdff url(http://2.bp.blogspot.com/-qnRqTRJBDBc/T7IbYKqwV_I/AAAAAAAADhs/1jXAAlyi060/s1600/notice-bg-namkna-blogspot-com.png) repeat-x 0
0;color:#796100;width:83%;font-weight:normal;padding:13px 15px
0;margin-bottom:2.5em;border:1px solid #306EFF;-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://3.bp.blogspot.com/-6yiWVYRwaMo/UUh94gK2lmI/AAAAAAAAJbw/P62nzrOjRO8/s1600/notice-tabs-namkna-blogspot-002.png) 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://3.bp.blogspot.com/-6yiWVYRwaMo/UUh94gK2lmI/AAAAAAAAJbw/P62nzrOjRO8/s1600/notice-tabs-namkna-blogspot-002.png) no-repeat 100%
0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<div class="note"><h5>Công Ty TNHH SX TM & DV Bốn Phương</h5>
<p>Chuyên cung ứng ...</p>
<ul>
<li>Văn Phòng Phẩm.</li>
<li>Ván ghép gỗ cao su.</li>
<li>Ván sàn gỗ cao su.</li>
</ul><span></span></div>

Sửa lại phần nội dung cho phù hợp là được. 

Nguồn : Internet