Stylish Note,Announce,success and Warning Boxes for blogger

Hi friends,I hope all of you all fine.Today i present you a very beautiful Blogger widget that i likes it very much.After a long search I find it yet.I present you at this time.Widget is about how add stylish Note,announce,success and warning boxes to blogger step by step Tutorial.These boxes attract reader to get notified.You see these boxes on many sites especially on WordPress based websites.Now it is available on Blogger also.These cute messages boxes inform your visitors and readers because they have professional Look.Warning Messages tells about warning don't do it .Announcement boxes are used to announce latest news and important notification.So are you ready to install this widget.

Steps to Added to Blogger

Step 1: Installation

• Go to Blogger Dashboard >> Template >> Edit Template
• Find the below code By Pressing CTRl+F

 ]]></b:skin>

• Paste the following CSS above find code

@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');
  }

  .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/AVvXsEivbRk8FuUJoclbvId-69G-CG23SSDXLF4x7CQ9T1d2gvuEq_N-oh-5jYnY_1oD0ljUujvL0Dr4KwkXrm7vRO0FOx9xlUEylfJbACVteWeSt3xE9sdKn6RT1cTVl7FtjIhUh9tFz17f9Ez7/s1600/thumb.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/AVvXsEgvI1w-DRJgiM7mJ_yoMQH9G5LAEr0q5J1dM-sh_CdsMRw1j8y3KQeuuFkgA7ltG8qwaRQoLUEOu7zQIA07yK5md6g8tOCTrfCpLjRs91ckOlGL-CaGN2t2fMY5uXLqP7JERNZ-iLm0tAg3/s1600/speaker.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/AVvXsEhGF_CVi8u_zsEr0n0io8JByUNQ1a-kmKH9VhWQxvqt6luJoJWRhEPNHDK4zoJ1Bx6z1qqxwMMTA3iuYCPfsZSVNOmGjhTd3tAUG2EYSDo-FXH2oySu22_FM5ZOSMPV4im6UrSn4y-KPh6a/s1600/tick.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/AVvXsEiblYGcXfwCnRO2YsdEIUclYF7bHqT7RID0qYmvqitdTVuK7CkAFrHyNlEPr_K4oxs3GuN9NdUB_v0buQ7E7LLNyVDOLVGecnC2aqMOZM9WTuSA4kWpQEf4SOcrgWD6rM0SdjaMW7b8bNIL/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

• Save Template

Step 2: Creating These Boxes In Blogger Post

• Go to Blogger Dashboard >> Posts >> Create New Post
• Select the HTML Tab
• Choose any box from the following which you want to add and copy the prospective code.
• Paste the Code where you want to show.

Stylish Note Box

<div class="message_box note">
  Hi, I am Mr.Noter. I'll notify your readers about the news.</div>

Announce Box

<div class="message_box announce">
  Mr.Annoucer is having meetup with Blogger Yard's Readers.
</div>

Success Box

<div class="message_box success">
  Mr.Success. Never give up! A day wil come when you will catch me.
</div>

Warning Box

<div class="message_box warning">
  Mr.Warner. I will try my best to warn from such worst things.</div>

• Replace Red Highlighted text with your text which you want to show
• Publish the Post and Mission Complete.

From Writer's Desk

I hope that you like it very much as I like it when I see it first time. In case of any problem please free to comment below and send us messages through contact us page.your comments and messages are appreciable for us.Happy Blogging.