Khung ghi chú cho blogger

 Dạo qua blog của bác Noct-land thấy bài viết này rất có ích và rất hay để mang đến sự chuyên nghiệp trong cách trình bày các bài viết với khung ghi chú "pro" thế này nên mình mạn phép mang về đây chia sẻ cho mọi người.

Để 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 HTMLcủ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/AVvXsEieSgVjHMx8m07M3Ld3B0LsNXZG7CGHIHDaVSxgnSm6YO-Sd1-CtjntX7nlcNwXnqf4WH_PK2X2-MVnnRQLvSsGCIIeBbsMGecD4CQ_Wg-le6Qpyk4sETGumxc2XeWDAbFiBAN1mrpPUDA/s128/notebg.jpg) 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/AVvXsEhg9TMjmKjS4GLWrbxCx1Q74unYRiJRk7mrPcgk1GgCQ9HA7A7kAx84C_FBQfl_LvIoQ1naOzbpDk0y_0I7OMas99PV-Ea6m_1epOLUVKden85lcYdfRZMoydLvqjXa0V7zjrxhtS-ZtIM/) 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/AVvXsEhg9TMjmKjS4GLWrbxCx1Q74unYRiJRk7mrPcgk1GgCQ9HA7A7kAx84C_FBQfl_LvIoQ1naOzbpDk0y_0I7OMas99PV-Ea6m_1epOLUVKden85lcYdfRZMoydLvqjXa0V7zjrxhtS-ZtIM/) 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 theo ý muốn!