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.
Demo
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.
Step 6.Copy the below script and paste it just before the <head> tag.
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 */Step 5. Now Search for <head> by Pressing Ctrl+F keys.
.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 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:
<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:
<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:
<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:
<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:
<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:
<div class="error">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.
<div class="bsdmesg">
<div class="headline">
<i class="fa fa-exclamation-circle"></i>Error message</div>
Dummy Text for Error Box. </div>
</div>