How to Add Professional CSS Alert Boxes in Blogger & WordPress

When creating a clean and attractive website, you don’t ever want to ruin it with error pages. Although they are not always unavoidable, many scripts can easily return a clean error message. Using a simple bit of CSS makes your errors display in an smooth, non-aggressive way. This method is also very effective in returning little messages to your user such as “you are now logged in” or “you received a message”. You Can Use This Codes To Display Warning Message Before Comments On Your Blog.

Let's first take a quick look at message types.

1. Information messages

The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action.

This is an important information.
This massage box can extent to any and height!

For example, info message can show some help information regarding current user action or some tips.

2. Success messages

Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation - no partial operations and no errors. For example, the message can say: "Your
profile has been saved successfully and confirmation mail has been sent to the email address you provided". This means that each operation in this process (saving profile and sending email) has been successfully performed.

Hooooray! This massage say that operation succeeded

I am aware that many developers consider this as an information message type, but I prefer to show this message type using it's own colors and icons - green with a checkmark icon.

3. Warning messages

Warning messages should be displayed to a user when an operation couldn't be completed in a whole. For example "Your profile has been saved successfully, but confirmation mail could not be sent to the
email address you provided.". Or "If you don't finish your profile now you won't be able to search jobs". Usual warning color is yellow and icon exclamation.

Now this is a Warning message!

4. Error messages

Error messages should be displayed when an operation couldn't be completed at all. For example, "Your profile couldn't be saved." Red is very suitable for this since people associate this color with an alert of any kind.

Ooops, This is an Error message.

So That User Not Left SPAM Comments And Saves Moderation Time. You Can Also Add This Code For Many Other Reasons.

• Login To Blogger Account.
• Click Blog Title → Template → Edit HTML.
• Click Proceed Button.
• Search For The Following Code Using Ctrl+F.

]]></b:skin>

• Now add the Below Code Above it.

body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

• Save Your Template.
• Now To Use This Box In Post Or Template Where You Want To Display Text In Box.

Design process:

Now when we know the way to present messages to users, let's see how to implement a it using CSS. Let's take a quick look at the design process.

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

That's it Now You're Done. Share Your Views With Comments :)