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/AVvXsEhCLcFaLDKm850LoSDWrdHYWi5x0dPYAJTkxijqPYlKTiHz6zOepa3ue7rLJ3ptpSKgAyg2EGsW56NG5EhCPa7mHdflcjZmdx2imvDvCsFmWpC3scAbzhq7csX7RFBZkiRhswaPseGMn-Xb/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/AVvXsEhqrUkC6J56xX_vPAt0thDyfylepzv1PvNs9366pwSwVdCU94DAS7iTxbHYT-vUn130N5yefK6nPKogrfQYs-7wERJIH_n9pfpwmpJPd9wvLblM2NuAKy9DNl8AMqNwJ8Vki2f8kSAja2Q6/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/AVvXsEgwydFCk9N9yL8x6tweVVjXK467WvfZgTdEvqhS1GXX8m8o10VjRxBxv6nh9do2oSOXu-vYZz0xmi45NXzBiQNdlbU-ttMoD907Adm6yLa8SMC_-ysR3ngPf1PyqpBO8JQdnLOlrTT3M3-5/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/AVvXsEimjJgVcUE9szp2eTt7upxk5sLqHfXRAe3NoF08awpJTGqH1yhhElqRegkefVoE4w_VlAah-P6Ktj4a1r6AUhAJM7v5yigjnmaZa_Oq3PnuIZfiw9EqUUeqJ5ravjhcaLTUVMhFYgr_sqh8/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.