Add CSS3 Notification Message Box In Blogger Template

0
Add CSS3 Notification Message Box In Blogger Template
Hello folks,Today in this article we are going to explain you how to add CSS notification Message boxes.By adding separate shade and textual content we can make it more beautiful for our weblog readers. And they may love to read your content material with complete energy. because of this i'm going to share sets of notification message boxes to boost your content.To grab this trick just follow the mentioned steps below.

How To Add Custom Notification Message Box Using CSS3

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> by Pressing Ctrl+F keys.
Step 4.Copy the below code and paste it just before the ]]></b:skin> tag.
/* Notification Message Box by http://www.bloggersstand.com */
.bsdmesg{color:#FFF;margin-bottom:15px;box-shadow:0 1px 2px rgba(0,0,0,0.20);border-radius:2px;padding:10px}
.success{background-color:#5CB85C}
.alert{background-color:#5BC0DE}
.warning{background-color:#F0AD4E}
.update{background-color:#017CB9}
.info{background-color:#18A8AA}
.error{background-color:#525252}
.headline{font-size:16px;background-color:rgba(0,0,0,0.30);padding:8px 10px;margin:-10px;margin-bottom:10px}
.headline > .fa{margin-$endSide:5px}
Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below script and paste it just before the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 7. Now Save your template.

Adding Notification Message Boxes In Post Editor 

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Write New post and click on edit html Button from post editor
Step 3. Now Copy Anyone code from the below and paste inside the post editor.
For Success Box:
Css Notifications Success Box
<div class="success">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-check-circle"></i>Success message</div>
Dummy Text for Success Box. </div>
</div>
 For Update Box:
Css Notifications update Box
<div class="update">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-volume-up"></i>Update message</div>
Dummy Text for Update Box.</div>
</div>
For Alert Box:
Css Notification alert Box
<div class="alert">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-exclamation"></i>Alert message</div>
Dummy Text for Alert Box. </div>
</div>
 For Warning Box:
Css Notification warning Box
<div class="warning">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-exclamation-triangle"></i>Warning message</div>
Dummy Text for Warning Box. </div>
</div>
 For Info Box:
Css Notification info Box

<div class="info">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-info-circle"></i>Info message</div>
Dummy Text for Info Box. </div>
</div>
 For Error Box:
Css Notification error Box
<div class="error">
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-exclamation-circle"></i>Error message</div>
Dummy Text for Error Box. </div>
</div>
We hope this article helped you to learn How to Add Add CSS3 Notification Message Box In Blogger Template.If you liked this article please Join us on Facebook,Twitter,Google Plus.
How to create a custom highlighter notification message box using css3 in blogger template,learn trick to adding a unique success,alert,info,warning,error message box inside blog post.
Hello folks,Today in this article we are going to explain you how to add CSS notification Mess...
SUMMARY

How to create a custom highlighter notification message box using css3 in blogger template,learn trick to adding a unique success,alert,info,warning,error message box inside blog post.

You Might Also Like:

We hope this article helped you to learn Add CSS3 Notification Message Box In Blogger Template. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add CSS3 Notification Message Box In Blogger Template" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand