domingo, 1 de abril de 2012

Enumerar comentarios animados con css

Para poder
enumerar nuestros comentarios animados solo tenemos que agregar lo siguiente


Agregar el CSS.
Usando la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS, y guardas los cambios en Aplicar al Blog:




.comment-thread ol { counter-reset: contarcomentarios; }
.comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 20px; color: #E6E6E6;
margin-top: -4px;} .comment-thread ol ol { counter-reset: contarbis; } .comment-thread li li .comment-header:after { content:
counter(contarcomentarios,decimal) "." counter(contarbis,decimal);
counter-increment: contarbis; float: right; font-size: 16px;
color: #E6E6E6; margin-top: -4px; }


 le das clic en aplicar planilla y listo.

Personaliza comentarios animados (Estilo bocadillo comic)

Para a los que quieren agregarle mas estilo a sus comentarios animados le enseñare como agregarle estilo de comic a nuestres comentarios de una forma facil y rapida con css.




Agregar el CSS.
Usando la nueva interfaz, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS, y guardas los cambios en Aplicar al Blog:




/* Estilo bocadillo comic */ .comments .comment-block { position: relative; margin-top: 
10px; margin-left: 60px; padding: 10px; background: #fffff;
border: 4px solid #E6E6E6; -moz-border-radius:8px; -webkit-border-radius:8px;
 border-radius:8px;} .comment-thread li .comment-block:before { position: absolute; left: -26px;content:"\25C4";font-size:30px; color:#E6E6E6;} 
.comment-thread li li .comment-block:before { content: ""; margin-bottom: 0px;}



presonalizacion


Color Rojo: Color de fondo
Color Azul: Color del borde de los comentarios
Color Verde: Color del triangulo del estilo comic

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...