Hello Amigos! Llama la atencion de tus visitantes y lectores de articulos de tu blog de blogger a la hora de dar una importante noticia o nota importante.Es una Caja de Notificacion.Para esto haremos una caja de notificacion.Adicionalmente se le ha añadido un efecto hover y que parpadea, que mejora o impresiona tu articulo.
Manos a la obra par a insertarlo en blogger.Mira el siguiente ejemplo.
Paso1 : Añadir el CSS
- Entra en tu cuenta de Blogger
- Plantilla> Editar Html
- Busca el siguiente codigo ]]></b:skin> (Ctrl+f)
- Añade el siguiente codigo antes de etiqueta ]]></b:skin>
.tip {
text-decoration: blink;
background: #FFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfMhVNqgBGLuWRn24IyIxG-mnUFTuqaFg34Y-FB5m487RwTDW83-0SCsZV_P8bKtoZNfFaok1-TU3FHmE1Z9sQEO8NOaPWcgaReNFIv1ku_noHhuLBC0dyttCu9jp0_GxYQ5pwRLyC5rg/s1600/pit2.png) center no-repeat;
margin: 0 auto;
width: 90%;
display: block;
border: 1px solid #D5B900;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
vertical-align: text-top !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tip:hover{
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
text-decoration: blink;
background: #FFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfMhVNqgBGLuWRn24IyIxG-mnUFTuqaFg34Y-FB5m487RwTDW83-0SCsZV_P8bKtoZNfFaok1-TU3FHmE1Z9sQEO8NOaPWcgaReNFIv1ku_noHhuLBC0dyttCu9jp0_GxYQ5pwRLyC5rg/s1600/pit2.png) center no-repeat;
margin: 0 auto;
width: 90%;
display: block;
border: 1px solid #D5B900;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
vertical-align: text-top !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tip:hover{
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
Paso 2 : Implementando la Caja de Notificacion
<div class="tip"><blink>Note:- </blink>Tu Texto Va Aqui</div>
Para finalizar Reemplace el texto en Rojo con el tuyo.
0 comentarios:
Publicar un comentario