Add Stylish Success , Announce , Note and Warning Boxes For Your Blog

Add Stylish Sucess , Announce , Note and Warning Boxes For Your Blogger Blog..Use These To Show Your Notifications...

Steps To Add This To Your Blog Post

1. Go To Blogger >> Template >> Backup Your Template
2. Click Edit HTML >> Search For   ]]></b:skin>  (Want help to find Click Here)

     3. Now Paste The Following code Above/Before  ]]></b:skin>

@font-face {
    font-family: 'Open Sans';
    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: 'Open Sans';
    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');
  }


  .nbt_message_box {
    margin:15px 0;
  }

  .note {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_7IN4-o7mipvKUvIP-e98ImLuqOaUgFdBGymzVCEkA5tO60g77ug0jXx__VQI4OztnFaF0R8NbHzf-KNIPy_vmXeKQrtXhgmrAkPjuQUpRayP8EsSVtWsF0Ic2o7mUZ8JgxxsAjGfzKQp/s1600/Nbt+Notification.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .announce {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAV25z-ZKIOkSr7OgfuMhQIR_KvLi49vRLaFVO-7ew1xexy5UJatZRuBzAuoRr0PqRT6VjoDYC5SICWZ2Bw32kSWpZIdpAqk7zYznI56wGF9MFsBvW1uqQsDj9BTSHCFADBBwpxAGExSBS/s1600/NBT+Announce.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

  .success {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRh-8x7D6oSeAAjmT1ccWWxHGgsdYTOdnglLzqySxr0PpQjpjLdG6x-OwUA8hOX55ERJad2j7CpFpMfKFwppX1fqrnSedaTiGEeywpc3mmh41uSCl8lQVBd5mnLbsY2MSdihnpnJ_LYqb-/s1600/NBT-Sucess.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .warning {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwBRxoZx2m1tfBJyy8J3qVW_gFOXN3mXyY9qHRa-JeCk60xDP_j6Wr65tXRxylGVo6xOranLJWDLcQwDxknPmJPHh307bRbnonoUfs89n1VT9j__DjDvLrCKFHWC-pGOyc6CoALd_atQn/s1600/NBT+Warning.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }
<br />

     4. Now Save Your Template

Do You Want To Add These Boxes To Your Posts Follow The Below Steps

1. Go To Blogger >> Create New Post
2. And Go To The HTML Tab
3. Copy The Below Codes Of Boxes
4. And Paste The Code In  In  HTML Tab.

Note Box :

<div class="nbt_message_box note">

Hello This Is NBT-Notification Box

</div>

Success Box :

<div class="nbt_message_box success">
Hello This Is NBT-Success Box
</div>

Announce Box : 

<div class="nbt_message_box announce">
Hello This Is NBT-Announcement Box
</div>

Warning Box : 

<div class="nbt_message_box warning">
Hello This Is NBT-Warning Box
</div>

• Replace The Red Text With The Your Message
• And Publish The Post.