Ads Nhà Tài Trợ
Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

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

Đăng nhận xét

0 Nhận xét
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Sở hữu một thiết kế thanh lịch và vô cùng đẳng cấp, mang trong mình một hiệu năng "cực khủng", chụp ảnh, quay phim chất lượng hàng đầu nhờ cụm 3 camera 50 MP. Thiết bị hoàn hảo dành cho dân làm việc văn phòng theo mô hình Workcation thích du lịch khám phá, làm Việc Từ Xa,... Thiết bị công nghệ số cực ngon dành cho TELEWORK, WFH, người làm nghề MMO, KOC / Streamer,...

Xem Giá Bán

Laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất. Thiết kế lai giữa laptop gaming và máy tính bảng sáng tạo, sang chảnh, trang bị công nghệ tân tiến nhất, chinh phục mọi giới hạn cùng với cấu hình vượt trội.

Xem Giá Bán