Adblock Detectado

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

He desactivado Adblock
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
- - 3 Comentarios
Tag

Comentarios (3)

  1. Por cierto amigo como le cambio el color amarillo por otro "EL DE FONDO PRINCIPALMENTE"

    ResponderEliminar
  2. @Carlo André Para cambiar el color de fondo es el siguiente código background: #FFC.

    Espero que te sirva

    ResponderEliminar
:))
:((
: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