Khung ghi chú cho Blogspot

Đâ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.

Các bạn hãy xem Demo để thấy rõ hơn.

 Bấm để Xem 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 rồi copy + paste đoạn sau:

<style type="text/css">
.note{background:#FFEA97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3MzmVOQU-f4hEDZtOUHVz7Hze9-lSqsl7fdBnKD8VArOZWLcKJczyKPC99YbUSZfxowXef-iIYcqngIVUc7rmqnAgo7kGxCkWii35MRxQUcm0Vk1DybRVCM572RyjOUN0n3ASF-qI6M/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 
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjugVhjdZ773YHQ26gXqe9jmyncBsRINeWXtmWvPZk8EoizTazsF4WFLg3TGVmfCK-ZeXBqo0OoEdk-72CVkbEMjskm4xzrs0yK-AP1pJJ9s6ATNPvN7RuS_i2Cgk9h5mYr1CW9iCR5aow/s1600/notice-tabs-namkna-blogspot-com.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjugVhjdZ773YHQ26gXqe9jmyncBsRINeWXtmWvPZk8EoizTazsF4WFLg3TGVmfCK-ZeXBqo0OoEdk-72CVkbEMjskm4xzrs0yK-AP1pJJ9s6ATNPvN7RuS_i2Cgk9h5mYr1CW9iCR5aow/s1600/notice-tabs-namkna-blogspot-com.png) no-repeat 100% 
0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<div class="note"><h5>Lưu ý!</h5>
<p>Chào mừng bạn đến với namkna...</p>
<ul>
<li>Vui lòng để lại một comment góp ý.</li>
<li>Bấm nút +1 nếu bạn thấy thích bài viết này.</li>
<li>Chúc thành công!.</li>
</ul><span></span></div>

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

Lưu ý!

Chào mừng các bạn đến với namkna

• Vui lòng để lại một Comment góp ý.
• Bấm nút +1 nếu bạn thích bài viết này.
• Chúc thành công.

(noct)

Chủ đề: