Friday, April 17, 2020
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.
CSS
/* 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.
Install FontAwesome
<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.
Css Notifications Success Box
Success message
Dummy Text 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>
Css Notifications Update Box
Update message
Dummy Text 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>
Css Notifications Alert Box
Alert message
Dummy Text 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>
Css Notifications Warning Box
Warning message
Dummy Text 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>
Css Notifications Info Box
Info message
Dummy Text 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>
Css Notifications Error Box
Error message
Dummy Text for 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.