Sunday, 17 May 2015

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

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> 

     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 NBTT-Notification Box</div>

    Success Box :

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

    Announce Box : 

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

    Warning Box : 

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

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

    post written by:

    0 Google+:

    Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
    Comment to get answered or to solve a problem not to spam. Thanks