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(http://2.bp.blogspot.com/-hQXstgVAlic/UjQtgBWW4PI/AAAAAAAAAjc/GTT5GaKWa_A/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(http://4.bp.blogspot.com/-Q1nta4EsRQg/UjQtfC0Vo0I/AAAAAAAAAjg/Hh-rs4Bxz_w/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(http://3.bp.blogspot.com/-YXcCe1ahewo/UjQtfJuNKRI/AAAAAAAAAjM/Ycr6OT868DQ/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(http://3.bp.blogspot.com/-WcTPBACALLE/UjQtfGCRVfI/AAAAAAAAAjQ/oRRlQXuIJ0A/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.