Stylish Note, Announce, Success and Warning Boxes For Blogger

It has been long we've not shared such beautiful blogger widgets, so when today I came to write a new post then I thought why not I share any unique widget to my loyal readers and visitors. After a little research, I found a simple, cute and unique widget or plugin for all blogger.com users. Today, I'm going to share Note, Announcement, Success and Warning message or notification boxes for blogger along with a step by step tutorial.

These are some best stylish notification boxes which will attract your readers to get notified. You might have seen such kind of boxes on several websites even WordPress based blogs are also using them. These cute message boxes will help you to inform your readers or visitors about any kind of message because they are looking professional in the design and eye-catching with smart icons. I strongly recommend everyone to use these boxes in appropriate way, time and place because they will also give more beauty to your blog posts or content.

Credits

I don't know surely who is the creator of these boxes but the truth as I'm going to tell you guys that I got these message boxes from a WordPress them which was designed by MyThemeShop. So, all the credit goes to the MyThemeShop developers team. 

How To Create These Message Boxes In Blogger Posts ?

Creating these amazing message boxes in blogger posts was very difficult for newbies but now this tutorial is going to make it easy for everyone. Here you will be guided step by step to install and create these message or notification boxes in blogger posts. Let's enter into the tutorial.

Step#1 : Installation

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML >> Search For ]]></b:skin>
• Paste The Following CSS CODE Above ]]></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');
  }


  .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/AVvXsEiz3dYGhKdJji-4DqGB4InOd8cZnU60soLMafOAVD_l9DiGA3_4N294T4Qm225sLbjwtf492xtmqzRvxf7P-9_TuIBAJyQkcd8Ko1jiElMchWlTSmsdTcKKXuOYrTfaqrv3KQA9_7IJ4hK0/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/AVvXsEgrdQWMuX_gi7DUuHZvQuPG9Ce4xlB3F6SeDTGmAUnhOEG4ES6paNDgQXkoFBBwmc7jPeoSzfsgW40unRSgtaanB3xQIo2XXIFkJNtnk6wkMZ3V_7sRZ1r_aj-AgXMuB6C2ofsbbAI6t5aA/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/AVvXsEjct-qCbq73vvvM2UR-GQOBs62SydNVpqY4MOfZkhW1-PbbdJ_qaIKh81dCQiBs2_KhqFDZVCIFcZfuaQhSAWvmLq8clEmPoo4mznId3CmHIx3DbzdAsymNkAH3iLMSvIGMKRjyK4RjhhPk/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/AVvXsEjeeiLEEj82UldQo1XLBPa-t8sspZcMTdiATN7wLBgIRnGZzoAgxbHZMEBUjpDZXjkkNri9fyzBkJN0FMzhZdBjnEboz4bzwyUuqiviJcCYg3D8V-Mq3xXKrujt3jD81bZfdKHMoBz7txSc/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

• Click "Save Template".
• You're Done in The First Step. 

Step#2 : Creating Boxes In Blogger Posts

• Go To Blogger >> Create New Post
• Go To The HTML Tab
• Choose Any Box From The Following Which You Want To Add.
• Copy Any Box's Code From The Following.
• Paste Their In The HTML Tab.

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 The Green Text With The Message You Want To Show.
• Publish The Post.
• That's All.