5 Necessary jquery Notification Boxes for blogger with close button

I have always stretched on the fact that a reader is always impressed by the way you present your blog and your posts.Sure content is the king but presenting your blog is of the same importance.So we here at PGL strive hard to find out ways by which our readers will be able to make their blogs look different.Here is a set of 5 essential boxes for blogger.They have been collaborated with jQuery to make it fancier.

Adding It in Blogger 

• Adding scripts
• Copying CSS
• Use of markup 

LIVE DEMO

Adding script 

• Search for </head>
• Paste this code above it 

Copying CSS

• Go to Blogger 
• Template > Edit Html
•  Search for ]]> (Ctrl+f) 
• Now place the code above it

/*CSS Code By Your Pc Genie */
.pgl{
 background:#ffffff;
 border:1px solid #bbbbbb;
 color:#6D6D6D;
 padding:10px 10px 10px 60px;
 margin-bottom:20px;
 position:relative;
}
.pgl:before{
 background:#bbbbbb;
 top:0;
 left:0;
 bottom:0;
 width:50px;
 content:'';
 position:absolute;
}
.pgl p{ margin:0; }
.alert.success{
 border-color:#b0d86e;
 color:#578C00;
}
.pgl.warning{
 border-color:#FFC95F;
 color:#EE800A;
}
.pgl.error{
 border-color:#ffaaaa;
 color:#D62626;
}
.pgl.info{
 border-color:#94dbff;
 color:#0091DC;
}
 
.pgl.info:before { background: url(http://png.findicons.com/files/icons/2166/oxygen/22/preferences_desktop_notification.png) no-repeat center center #bce9ff; }
.pgl.error:before { background:url(http://png.findicons.com/files/icons/998/airicons/24/error2.png) no-repeat center center #ffcbcb; }
.pgl.warning:before { background:url(http://png.findicons.com/files/icons/2015/24x24_free_application/24/warning.png) no-repeat center center #fff8ac; }
.pgl.success:before { background:url(http://png.findicons.com/files/icons/1588/farm_fresh_web/16/tick.png) no-repeat center center #DBF0B8; }
.pgl.help:before { background:url(http://png.findicons.com/files/icons/1715/gion/22/help_browser.png) no-repeat center center #bbbbbb; }
 
.pgl .pgl-close{
 position:absolute;
 right:0px;
 top:0px;
 background:url(http://www.heb.com/images/popup_close.png) no-repeat center center #bbbbbb;
 padding:1px;
 height:13px;
 width:13px;
 display:block;
 text-indent:-9999px;
 -webkit-border-radius: 0 0 0 3px;
 -moz-border-radius: 0 0 0 3px;
 border-radius: 0 0 0 3px;
}
.pgl.success .pgl-close { background-color:#b0d86e; }
.pgl.warning .pgl-close { background-color:#FFC95F; }
.pgl.error .pgl-close { background-color:#ffaaaa; }
.pgl.info .pgl-close { background-color:#94dbff; }
.pgl.success .pgl-close { background-color:#b0d86e; }

Using It In Blog

<div class="pgl success">
<p><strong>Success Message.</strong> Your message here.</p>
<p><a class="pgl-close" href="javascript:void(0);">Close</a></p></div>

<div class="pgl warning">

<p><strong>Warning Message.</strong> Your message here.</p>

<p><a class="pgl-close" href="javascript:void(0);">Close</a></p></div>

<div class="pgl error">

<p><strong>Error Message.</strong> Your message here.</p>

<p><a class="pgl-close" href="javascript:void(0);">Close</a></p></div>

<div class="pgl info">

<p><strong>Info Message.</strong> Your message here.</p>

<p><a class="pgl-close" href="javascript:void(0);">Close</a></p></div>

<div class="pgl help">

<p><strong>Help Message.</strong> Your message here.</p>

<p><a class="pgl-close" href="javascript:void(0);">Close</a></p></div>

Customize The Box Content 

Replace Your message here. with your own text.

You are free to use this box anywhere in your blog.Use your own creativity and make the most out of this box.Best of luck customizing your blog.If you have any post related problems do comment below.PEACE :) 

Written by Aman

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.