Thủ thuật tạo box thông báo đẹp mắt cho bài viết trên Blog

Trong quá trình soạn thảo một bài viết, chắc hẳn bạn cũng muốn chèn vào một dòng thông báo đẹp mắt, thu hút sự chú ý của độc giả (giống như hình trên), bài viết này mình sẽ hướng dẫn các bạn một thủ thuật như vậy để tạo box thông báo đẹp mắt cho bài viết trên blog.

Bước 1: Tại trang quản trị, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn sau vào trước thẻ]]></b:skin>:

/* Notification Box / quangvietmkt.blogspot.com */
@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/AVvXsEii6wK_vIV7H3GyfL0sT3YQfOVL7-jc00_H3h8ifYBZ7HB76Tjmuw4RjRwuRDcw5aJth_ObvHFJ1yvKFRnFN6XPE0wntPXWpr4dKKTsMV5njejMfN0a2e63wE7t3Y7c-t_i0pnkV8Xz9I8o/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/AVvXsEi2vN5oDoPAqT4M46SVpRGQYKV2ueUC6Sb0nDR6QGg0wnbrka-r6vBmJBIARlDYp1wPvGhVtSO8uh-MRpwHmIrI2GlRTRK8W-J3LhZM6vITtHs-fi1EYvPBcsY8lhsTUed2o5cqwFog6fJx/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/AVvXsEgxOgeQTTr9JxO2jB6o7B-pvqa1V0RcomKIgd5YEjezCka53aIQfOImJEeTJ-8kxo50QiPXUbxlFILn8l_-a6TXnHM-LZvgAtdlrUp1gX8qUvBil0WBWrj41S-QGausX3ZurmKstGf6lUXL/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/AVvXsEiOXvTiQz4VboeWok_31rcTFFjE_YKgWnsYDexvbPtdaai0ufLUbtkbjq4CEaG3KI275fuj-4pBLEfawIz0tDSYrGy5CCXMLVpJ2IApXfOROOhhzFc-cK8TC26PyO8OfnebA5PovJawJIFe/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

Bước 2: Sử dụng:
- Khi cần chèn box vào một bài viết, các bạn sử dụng một trong những đoạn code tương ứng sau:

• Note box:

<div class="message_box note">
  Text của bạn.
</div>

• Announce box:

<div class="message_box announce">
  Text của bạn.
</div>

• Sucess box:

<div class="message_box success">
  Text của bạn.
</div>

• Warning box:

<div class="message_box warning">
  Text của bạn.
</div>

Chúc các bạn thành công !