20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add CSS3 Notification Message Box In Blogger Template

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

Post a Comment