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

Hoy veremos como agragar caja de Notificaciones para Blogger con CSS , muchas veces cuando queremos agregar una nota en nuestro blogger para describir ciertos artículos  pasa desapercibida o no llama realmente la atención, hoy veremos como darle un toque mas vistoso a esos Artículos





Antes de comenzar veremos una demostración en vivo

Nota:- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Comencemos

• 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 codigo CSS

.tip {
text-decoration: blink;
background: #FFC url(URL-IMAGEN) 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 4: Guardamos los cambios Efectuados en la Plantilla

Ahora agregaremos el código HTML que  mostrara la Caja de Notificaciones

• Paso 5: Una ves en nuestra entrada agregaremos el codigo HTML 

<div class="tip"><blink>Nota:- </blink>TEXTO</div>

Y listo ya estaremos difrutando de un hermosa Caja de Notificaciones para BLogger

Nota:- Cambia la URL-IMAGEN por un imagen que te guste