Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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:
  • 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.




- - 2 Comentarios
Tag

Comentarios (2)

  1. genial lo que buscaba para mis entradas gracias

    ResponderEliminar
    Respuestas
    1. Buenísimo espero que te halla servido. Gracias a vos por tu comentario

      Eliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar