• 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(http://2.bp.blogspot.com/-H2cQGpu6B08/UbqjmbSoCzI/AAAAAAAACUQ/byyeJFP8C28/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(http://3.bp.blogspot.com/-sd2EtJIYnW4/Ubqjli0tocI/AAAAAAAACT4/jlP5mYMCvzE/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(http://1.bp.blogspot.com/-l0KfqLngx34/Ubqjm1f4WII/AAAAAAAACUc/9_TL1-p9bVg/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(http://4.bp.blogspot.com/-C4uNFnXOjIQ/Ubqjk5T06QI/AAAAAAAACTg/2rEMsonXpJI/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.