Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
La estructura de los comentarios contiene distintas etiquetas las cuales cada una se diferencian con distintas Id's o clases, por lo tanto se pueden personalizar mediante CSS.

He visto en distintos blog los cuales por ejemplo, el editor de comentarios se encuentra a la izquierda y con un tamaño muy chico, el cual distorsiona con el diseño del blog.

Por supuesto que eso va en el gusto de cada uno.


Con algo de CSS podemos cambiar el aspecto de nuestro editor.

También se puede corregir la distancia en la parte de abajo del editor.

En la siguiente imagen veremos distintas partes las cuales podemos personalizar, destacadas por un numero y un borde de distinto color:


Cada parte tiene una ID (#) o una clase (.)

Los códigos CSS van arriba de ]]></b:skin>

#comments{
propiedad: valor;
propiedad: valor;
}
#comments h4{
propiedad: valor;
propiedad: valor;
}
.avatar-image-container{
propiedad: valor;
propiedad: valor;
}
#comments-block{
propiedad: valor;
propiedad: valor;
}
.comment-author{
propiedad: valor;
propiedad: valor;
}
.comment-body{
propiedad: valor;
propiedad: valor;
}
.comment-timestamp{
propiedad: valor;
propiedad: valor;
}
.comment-form {
propiedad: valor;
propiedad: valor;
}
#comment-post-message{
propiedad: valor;
propiedad: valor;
}
.comment-form p{
propiedad: valor;
propiedad: valor;
}
#comment-editor{
propiedad: valor;
propiedad: valor;
}

Por ejemplo si queremos personalizar el editor: (11)

#comment-editor{
width:600px; /*ANCHO */
height:240px; /* ALTO */
margin-left:20px; /* DISTANCIA DESDE LA IZQUIERDA */
}

Ajustamos el ancho.
Con la altura podemos sacarle la separación que tiene abajo.
Con el margin-left ajustamos para dejarlo centrado.

Ver ejemplo:

Si quieren dejar un mensaje a los visitantes arriba del editor (10), lo hacen desde:

Configuración, Comentarios y colocan el texto en donde dice:

Mensaje del formulario de comentarios.

Ejemplo para personalizar: (10)

.comment-form p{
border: 1px solid #ccc;
width:500px;
padding:10px;
color:#fff;
background:#000;
margin-left:20px;
}

Si solo quieren centrarlo.

Centrar todo (1)

#comments{
margin:0px auto;
}

Centrar la caja desde "Publicar un comentario en la entrada" (8)

.comment-form{
margin:0px auto;
}

Cualquier duda me lo comentan.

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Hogar CRECER dijo...

Está muy bueno! Uno se siente más importante ofreciendo un espacio como el de tu ejemplo que una simple ventanita. 6)

Claro que hay que tomarse su tiempo. Lo intentaré en algún momento, y si no, como tantas veces... S.O.S.!!!

Abrazo.

Vku dijo...

Corona, tu puedes.
Desde que te conozco has aprendido un montón. Y ya sabes que puedes contar conmigo.
Besos.

Kiralisimo dijo...

hola Vku, muy buena la entrada, de momento ya modifique lo que es el editor :D gracias!!

teofermi dijo...

Hola vku, de nuevo necesito tu ayuda, mira, en las entraadas donde tengo algun comentario, en la pagina individual de la entrada, aparecen los comentarios con unos colores que no me gustan, amarillos jaja y quisiera que solo me quedara el fondo negro que tengo en el blog ¿como puedo quitar esos colores?¿me podrias ayudar?

Gracias
besos desde España

Vku dijo...

Tienes que buscar un código javaScript

$(this).next().next().prependTo("#" + divId);
$(this).next().prependTo("#" + divId);
$(this).prependTo("#" + divId);
$("#" + divId).css("padding","10px");
if(i%2==0){
$("#" + divId).css("background-color","#B8D62F");
}else{
$("#" + divId).css("background-color","#DFF294");
}
});
});

Ahí cambia los colores #B8D62F y #DFF294

Por ultimo busca esto en el css

.blog-author-comment p {
clear: both;
margin: 3px 0px 10px 0px;
padding: 10px 10px 4px 10px;
width: 606px;
border: 1px solid #cfcfcf;
background: #99CC66;
#Label1 ul, #Label2 ul {
list-style-type:none;
}.imagencomentario {
border: 1px border: double #826C55; 4px; #ffffff;
padding: 5px 10px 0px 0px;
}

como veras son 2 clases mas unas id´s

la primera clase es la que muestra el fondo del autor (vos) y no esta cerrada

y la segunda clase es un desastre como esta

cambia por esto

.blog-author-comment p {
clear: both;
margin: 3px 0px 10px 0px;
padding: 10px 10px 4px 10px;
border: 1px solid #cfcfcf;
background: #99CC66;
}
#Label1 ul, #Label2 ul {
list-style-type:none;
}
.imagencomentario {
border: 1px double #826C55;
padding: 5px 10px 0px 0px;
}

En negrita tienes que poner el color que quieras
negro es #000

teofermi dijo...

@ Vku:
Que desastre madre mia, he podido arreglar solo una parte, el JavaScript no lo encuentro..

teofermi dijo...

yaaaaaaaaaa lo encontreeeeeeeeeeee!!!
jjajajja, madre mia diras que cuanta torpeza!!!

Gracias y mas gracias

un beso

Ktini dijo...

Hola Vku.

como puedo hacer para enmarcar los comentarios como tienes tu pero el nombre y la fecha tambien que esten dentro del recuadro.

Gracias.

Vku dijo...

Ktini
A ver si es esto lo que quieres.
Busca el siguiente código en Edición de HTML con artilugios expandidos.

<div class='' expr:id='data:comment.id'>

Le agregamos el estilo directamente.

<div class='' expr:id='data:comment.id' style='border:1px solid red;margin-bottom:10px;padding:10px;'>

Adaptalo a lo que tu quieras cambiale las distancias y el color del borde.

Cocofansclub dijo...

Hola vku!despues de leer tu entrada,me puse a ver mi editor de comentarios y tienes razon a veces el tamaño no queda bien en relacion al blog,por eso decidi hacer unos cambios!!creo que me quedo mas armonioso,quisiera saber porque me queda una linea debajo del ultimo comentario,me gustaria sacarla pero no se como,para que me comprendas cuando puedas paste por mi blog asi lo ves,y me das tu opinion.
gracias y tu blog cada dia mejorr!!

Vku dijo...

Corina prueba colocando en CSS

.comment-footer {display:none}

si no funciona prueba en lugar de .comment-footer poner #comments-block

teofermi dijo...

Holaaaa, quisiera hacerte una consulta, quizas sea una tonteria pero no se donde cambiarlo, mira en la pagina de las entradas individuales quiero cambiar el color del texto de los comentarios, me sale en rojo y quisiera ponerle otro color, blanco
¿donde puedo cambiarlo?

Muchas gracias
besos

Vku dijo...

@ teofermi:
Arriba de </head> pon:

<style type='text/css'>
comment-body, blog-author-comment p {color: #fff}
</style>

Vku dijo...

@ teofermi:
Si, perdon me faltaron los puntos.

Estos días ando cansado viajando mucho y la mente no me funciona muy bien. jajaja

Es así:

<style type="text/css">
.comment-body, .blog-author-comment p {color: #fff}
</style>

teofermi dijo...

@ Vku
No te preocupes, no pasa nada, lo importante es que siempre estas dispuesto a ayudarme y te lo agradezco enormente, ahora si salio!!!!!!!!!!!!!!!! me quedo como yo quiero

Muchas gracias genio por tu ayuda
besos desde España
teo

Julio Hernandez dijo...

en mi blog no recibo comentarios no se como poner un formulario como el tuyo ayudame mi blog es photoshopincreible.blogspot.com

Vku dijo...

Tienes que ir a Configuración y en la pestaña Comentarios marcas la opción Entrada incrustada a continuación, guardas.

Luffy dijo...

Hola que tal Vku, me han servido mucho tus tutoriales, y queria saber porque en un ipod mi pagina se carga a la izquierda, viendose una franja del fondo ala derecha, lo he intentado solucionar y no he podido, gracias de antemano!

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?