Notification box css cho Blog

Trong một bài viết thì đôi khi sẽ có những phần nội dung như nhấc nhở, ghi chú, cảnh báo, thông báo mà bạn gửi đến người đọc. Để làm nổi bật được những nội dung vừa nêu trên thì bạn cần phải làm sao cho chúng trở nên nổi bật hơn. Hôm nay, mình sẽ hướng dẫn cách để tạo notification box css cho blog.

#DEMO

Note box - khanh98.blogspot.com

Announce box - khanh98.blogspot.com

Sucess box - khanh98.blogspot.com

Warning box - khanh98.blogspot.com

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }


  .message_box {
    margin:15px 0;
  }

  .note {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiNmwm_Va6Qj5-E49DVFZOF9L_PBIslM7jbUo2IT-5Q-Y-a2Unhh2NVdUC2cBiSk88A87A4iQHNZBCLICX4FO7dd-wQxsqD7-YrkKDeEUqHgD-_-yWecibkI6nIwtcLOm-jwWxyigcThp/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .announce {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVGy3OeHvh9SZerw_9NWtDH8F7njTMmT8xXdEILHyKYDB0ASUZhPz9sJB6ZFFB5zYV3raOY8djQKtp8M3DBBFBM5SpAHIi4zYFa_rcdN-wUlzgEXGUqExFyEXXbYvxW09qRdvUNvIsKVz/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

  .success {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzX2gjJvVwiqIeofp7uJFPyR6JjWBXp-08qJqGSvijznf5UesQTwCOdFBHVIMUj6JjN54jicruPF4z6YgcwCk8z6eLfERwor7g32k41MCz2EEwsE8c32faL6-fO9Dyhct7EwmQBW-J0wHd/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .warning {
    color:#666;
    font-family:"Arial";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaimulGdjTYON28kWanVrcRBaCDbBFb7nkYBOHHuHqkd8wCmJe9L_zKYvPnNnFhNY13FnNPLdrvqjjfCGqX4cG3vvgvVlmaAuE9MqmK3o6EjTOiGO_bU1zAKU4HdXkUYsSZHJRoZtlIWaN/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

#Sử dụng khi viết bài

Khi viết bài mà cần sử dụng đến notification box thì bạn chuyển sang chế độ viết HTML và sử dụng code dưới
Notebox

<div class="message_box note">
text - Note box - khanh98.blogspot.com  
</div>

Announce box

<div class="message_box announce">
text - Announce box - khanh98.blogspot.com
</div>

Sucess box

<div class="message_box success">
text - Sucess box - khanh98.blogspot.com
</div>

Warning box

<div class="message_box warning">
text - Warning box - khanh98.blogspot.com
</div>