Add Metro Style Alert Box In Blogger and WordPress

After creating blogger template or WordPress template it is necessary to add some sidebar widgets, and styles to it. Style include the way to show the errors,notification,information and success message with the proper style. In this post there is a simple CSS code to add awesome Alert box in wordpress as well blogger blog.

alert_box_blogger_Wordpress

It is a mixture of  simple HTML and CSS tags. Which will create an awesome effect for you. Get the look at the various types of notification bar.

1. Error Message

Oops !! This is a demo of Error message not an error.

Your alert box in wordpress/blogger blog will look like this.  It will look catchy and attract the visitors. It is always better to display an error with error box rather than simple showing it. You can use it whenever user makes an error like duplicate comment, invalid email address.

2. Success Message

Congratulations. Your registration is completed.

It is always better to highlight  the expression like success. You can show this success message bar to an user after successful comment or registration or confirming email address. It will look more professional than traditional one.

3. Warning Message

Hello man. This a warning for you

Whenever user is trying yo make you/your blog fool at that time it is necessary to warn him/her. Add a simple code of warning alert box in blogger/wordpress will change a look of your blog.

4. Information Alert box

There is a cool offer for you. are you interested ?

It is always better to high light the important information with the users of your blog. let you add this awesome information box to your blog and make it professional .

How to add this Metro Style Alert Box in Blogger ?

You can simply add these various alert boxes to blogger blog with the simple steps and code as shown below.

1.Go to blogger dashboard

2.Select Blog > Template > Edit Html

3.Press Ctrl + F and find following code:

]]></b:skin>

4.Now add the following code just before it.

.info, .success, .warning, .error {
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid;
margin: 10px 0;
padding: 14px 9px 14px 48px;
}

.info {
color: #0D81E9;
background-color: #C8E9F8;
background-image: url(‘http://2.bp.blogspot.com/-d2cv8pI-jfM/Ulw6L5EShdI/AAAAAAAAFK4/oFwO7EjbdME/s1600/tbm_info.png’);
}

.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url(‘http://2.bp.blogspot.com/-xMBjARKE2dU/Ulw6Lwjm6PI/AAAAAAAAFLA/CIl8ftuS3ho/s1600/tbm_success.png’);
}

.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url(‘http://4.bp.blogspot.com/-pZIq9VNFwjU/Ulw6MmosfPI/AAAAAAAAFLQ/EttTXiUCK4w/s1600/tbm_warning.png’);
}

.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url(‘http://4.bp.blogspot.com/-KG0amzHF73Y/Ulw6LxQOepI/AAAAAAAAFK8/f4fWxfCBVOE/s1600/tbm_error.png’);
}

5.Save the template.

Now you can use this alert box where ever you want inside the post as well to the outer elements of blog.

How to use this alert box ?

Method to use this alertbox is quite simple. just add <div class=” NAME”> To the element which you want to show an alert.

You can get a clear idea from the below HTML code.

<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>

How to add CSS Alert Box in WordPress?

It is very simple to add css to wordpress blog. 

1.Go to wordpress admin panel.

2.Appearance > Editor > style.css

3.Copy the code from above and paste it at the last.

4.save the file .

You can use this alert box in WordPress as shown above. Add the respective class to the sentence you want to modify. Hope this tutorial will help you to create an awesome design of your blog with awesome metro style alert box. 

About Akshay Makadiya

Akshay Makadiya has written 65 post in this blog.

Akshay Makadiya is a upcoming blogger from Rajkot,Gujarat India. Apart from Blogging , he is an Engineering Student at Ganpat University,kherva. His areas of Interest are Blogging,hacking and Designing. Currently He is the Owner of the Techbymak. Connect with him on Google+ and Twitter @axymak

Comments

  1. Raj Savani says:

    Thank you Akshay,it is very useful for my blog.

  2. Adrienne says:

    Hi Akshay,

    That’s really neat and thanks for showing us how to code them into our blogs. When someone walks me through how to do something like this then I can. If they don’t then I’m lost because I’m definitely no coder.

    I don’t really think I need these though. No one registers for my blog and there wouldn’t be any reason they would get any error or warning messages. I like the look of the boxes though so thanks for sharing this with us.

    Have a great week.

    ~Adrienne

Leave a Reply