5 casute de notificare jQuery Blogger cu buton Close

Eu am tins întotdeauna faptul că un cititor este întotdeauna impresionat de modul în care prezinta blog-ul. Sigur continutul este regele, dar prezentarea blog-ul dvs. este de aceeași importanta.Asa ca va prezint asta 5 causte esențiale pentru blogger.

• Adăugarea lor în Blogger

adăugarea script
copierea CSS
utilizarea indicelor tip mark-up

• Adăugarea script

Caută in tema sectiunea </ head>
Inserați acest cod de mai sus este
Cauta ]]> (Ctrl + f)
Acum, plasați codul de mai sus inaintea sectiunii:

/*CSS Code Cuv */
.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; }

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

Înlocuiți Your message here. cu propriul text.