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. Do có nhiều người hỏi cái này nên bèn kiếm mẫu nào đẹp đẹp rồi đăng luôn để blog bớt mốc meo. Việc có một khung ghi chú pro sẽ khiến "đẳng cấp" của bạn được nâng cao.




Để 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 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>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>

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

42 comments

Đẹp póc tem

bóc chậm 1 bước,đang áp dụng cám ơn anh Noct nhiều,lâu lắm mới thấy anh viết lại :)

8/10/2011 comment-delete

Khà khà,nghĩ coi mềnh có giề cần thông báo để cài đặt đã chớ .Lâu lâu có bài mới cho pà con đỡ "dài cổ " Noct ui.Làm thêm vài cái Temp nữa đi cho anh em thay "áo" nữa đê.

@ Nguyễn Văn Quyết:có 6 sitelink roài nha.Đã ghê,mình gõ tên blog mình trên G toàn thấy ở bên nhà Noct ,Hic:D

@Ngọn lửa nhỏ: Có dự trữ 1 cái mà không muốn share chút nào :D

8/10/2011 comment-delete

Đã +1 cho bài này :D

NAD
8/10/2011 comment-delete

@Noct :share đại đi anh :D,chắc đẹp hơn temp của anh lúc này hay sao mà giấu kĩ thế :D

8/10/2011 comment-delete

Mình chỉ có mỗi thắc mắc là những demo của Noct toàn viết chữ Latin, nhìn hoa cả mắt. Thank Noct nhé!

8/10/2011 comment-delete

Khung này nó hiển thị ở trang chủ giống như khung thông báo trước hả Noct ?

8/10/2011 comment-delete

Không, nó hiển thị ở đâu cũng được [-(

8/11/2011 comment-delete

Phải nói cái này nó đẹp hơn cái trước có demo cho mọi người đây: http://ictsoftsss.blogspot.com/

8/11/2011 comment-delete

Nhanh - Gọn - Nhẹ :)

8/11/2011 comment-delete

rất gọn gàng với css

8/11/2011 comment-delete

demo đâu rồi nhỉ, sao không xem được a à

8/11/2011 comment-delete

chà thủ thuật đẹp thật, mà ko biết sao chèn vào hiện ra đầy đủ như demo, chỉ thiếu cái dấu chấm thang í, ko biết sao nó ko hiện ra :(

8/11/2011 comment-delete

Refresh lại thử xem :D chắc lag mạng ấy mà

8/11/2011 comment-delete

có cách nào chèn vô gần phần comment không noct ơi, tại blogspot ko cho chèn thẻ style vô phần ghi chú

8/11/2011 comment-delete

bạn di chuyển phần CSS trong thẻ style vào trong thẻ <b:skin> là được

8/12/2011 comment-delete

Noct xuất chiêu lun đẹp đẽ và tươm tất b-)

8/13/2011 comment-delete

CSS của bác rất chuyên nghiệp :D

8/13/2011 comment-delete

Noct ơi! Sao cái demo nó hiện luôn cả bài liên quan trong đó vậy

QT
8/13/2011 comment-delete

vì quên cắt ảnh

8/13/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

8/13/2011 comment-delete

Tuyệt chiêu độc mà đẹp nha. tks, CSS PRO :)

8/14/2011 comment-delete

Chèn vậy nó có show hình ra trang chủ ko nhỉ[-(
Lại bài nào cũng thấy hình ghi chú thì hay =d>

8/15/2011 comment-delete

Lâu rồi mới thấy bài mới của bác . Liệu chèn css vào bài viết có làm chậm trang không bác ?

8/16/2011 comment-delete

Noct đang "dỗi hờn" về dzụ temp nên hônh muốn chia sẻ,hu hu.Chờ thêm vậy

@2-sao : cững giống như bạn chèn thêm 1 cái ảnh vào bài đăng thôi, nhưng nhẹ hơn nhiều

8/17/2011 comment-delete

@Noct Thank bạn nhe .

8/17/2011 comment-delete

lúc trước mình cũng có site blogspot nhưng chán giờ chuyển qua wordpress rồi tự dưng dạo này blogspot có nhiều thủ thuật hay quá nhìn thấy mà muốn ghen tị :D

8/17/2011 comment-delete

Khung rất đep, cảm ơn bạn, mình đã áp dụng.

8/22/2011 comment-delete

Blogspot ngày càng nở rộ tại việt nam rồi , chúc các bác thành công , em thì chắc chờ 1 templates mới của bác noct rồi em mới chơi lại thôi ^^

8/23/2011 comment-delete

Cái này rất đẹp, cảm ơn Noc-t =d>

8/23/2011 comment-delete

Bác Noct lâu lâu mới thấy post bài nhỉ :)

8/24/2011 comment-delete

Hay quas, dang cần cái này

8/25/2011 comment-delete

cái nì lên blog trông rất đẹp, thank anh nhìu nha. bài viết of anh chất lượng ko à, hihi.

9/02/2011 comment-delete

tình hình là không làm được anh ơi.........??? http://a1k44.thptbatbat.com/2011/07/k-lam-noi.html

9/15/2011 comment-delete

Nhưng cách này không tự động cho lắm, tức khi muốn sửa lại khung này thì phải sửa tất hả bác Noct :))
có 1000 bài viết thì vào 1000 bài đó sửa lại mã html hoặc CSS, vậy bất tiện quá, em tin là cái khung comment của anh là chung cho tất cả bài viết, thay 1 cái là toàn bộ thay theo :D
làm nào đây ạ :D =d>

10/14/2011 comment-delete

@iTuPlus muốn sài chung thì chuyển phần CSS vào trong template HTML

10/14/2011 comment-delete

Làm sao để chèn khung này vào trên ô Comment nhỉ

10/16/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

3/03/2012 comment-delete

@AdminBạn cố tình hay cố ý không đọc nội qui comment vậy ?

3/03/2012 comment-delete

Quá đẹp anh ơi.phải áp dụng ngay và luôn thôi

8/12/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License