Tutoriales Sobre Blogger: 4 Caja de Notificaciones para Blogger con CSS

En este tutorial veremos como Agregar 4 modelos de notificaciones para Blogger con CSS. Muchas veces los blogger buscan la mejor manera de presentar sus entradas y llamar la atención a sus lectores para que regresen





Antes veremos una demostración:

Demostración

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTMl
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>  

• Paso 3: Justo por encima de ]]></b:skin>  pegamos el siguiente código CSS 

/*TutorialesBlogger.blogspot.com */
.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; }

• Paso 4: Guardamos los cambios efectuados

Agregaremos las Notificaciones en nuestras entradas  

<div class="pgl success">
<strong>Mensaje Aprobado</strong> Tu mensaje Aquí.<br />
<a class="pgl-close" href="javascript:void(0);">Close</a></div>

<div class="pgl warning">

<strong>Peligro Mensaje.</strong> Tu mensaje Aquí.<br />

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

<div class="pgl error">

<strong>Mensaje Error.</strong> Tu mensaje Aquí.<br />

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

<div class="pgl help">

<strong>Mensaje Ayuda.</strong>&nbsp;Tu mensaje Aquí.<br />

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

Ok ya tendríamos nuestras Cajas de Notificaciones creadas en nuestras entradas.