Con un pequeño código CSS podremos darle un estilo único a nuestros mensajes en la caja de comentarios.
Antes de comenzar veremos una demostracion:
Comencemos:
- Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>.
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
<b:skin></b:skin>
- Paso 3: Desplegamos el código aquí dentro ►<b:skin></b:skin>
- Paso 4: Dentro de ►<b:skin></b:skin> Buscamos la siguiente linea.
]]></b:skin>
- Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.
#pra-comment{
position: relative;
background:#538cd6;
width:650px;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #436590;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #436590;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #538cd6; /* Samakan dengan warna background */
border-width: 9px;
left: 10%;
margin-left: -30px
}
- Paso 6: Todavia en la plantilla buscamos la siguiente linea.
<p><data:blogCommentMessage/></p>
- Paso 7: Seguramente encontraras mas de 2 <p><data:blogCommentMessage/></p> remplazalas todas por la siguiente linea
<div id='pra-comment'><data:blogCommentMessage/></div>
- Paso 8: Guardamos los cambios realizados
Ahora para agregar un información sobre la caja de comentarios o el texto que queramos agregar
- Paso 1: Vamos a Blogger>> Configuración>> Entradas y Comentarios
- Paso 2 Guardamos la configuracion
Que hay amigo como le cambio el color a la letra del cuadro a blanca y por otro lado como pusistes esos emoticones de aca arriba saludos
ResponderEliminar@Carlos PavonTe comento justo por debajo de:
ResponderEliminarfont:normal 12px trebuchet ms;
pega la siguiente linea...
color:white;
White; puedes cambiarlo por el color que desees
Ok gracias
ResponderEliminarBuenas!
ResponderEliminarQuiero añadir una imagen justo encima de la caja de comentarios de mi blog, ¿Cómo puedo hacerlo?
Un saludo
@Lady Lioncourt
ResponderEliminarEn esta entrada esta lo que buscas.
Aqui
Saludos
Gracias amigo ahora si logre personalizar los comentarios,,
ResponderEliminarYo lo que quiero es modificar el estilo de los comentarios, al igual que tu blog, una imagen redonda al lado izquierda de mi nombre, y la fecha al lado izquierda, comentarios separados, flecha abajo, etc.. Si pudieras decirme como, te lo agradecería
ResponderEliminarSi creo que es lo que me estas pidiendo tengo el tutorial en un borrador, ahora mismo lo publicare para que puedas ver si es lo que me pides
EliminarOk, muchas gracias! Te currastes mucho el blog, me gusta tu blog, lo agregué a favoritos, a demás eres muy rápido respondiendo comentarios! =D
EliminarGracias a ti!
EliminarRespondo rápido por que en este momento esta horrible en donde vivo y no puedo salir, llueve a cantaros jajaja, estoy aburrido en la compu jejeje
xD, una pregunta ¿Cual es el link de la entrada de comentarios?
EliminarMmm... no te entiendo que me quieres preguntar
EliminarSi pudieras darme el html que usas para los comentarios de aquí abajo de tu blog te lo agradecería, por cierto, estoy viendo un poco tu blog y es genial!
EliminarEse gadget no lo tengo como entrada. Se ve que me lo he pasado por alto solo tienes que agregar en un gadget HTML/Javascript el siguiente codigo HTML
Eliminar<style type="text/css">
ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
.sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.sakahayang_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5, <i>numero de comentarios</i>
showAvatar = true, <i> motrar avatar</i>
avatarSize = 30, <i> altura y ancho del avatar en px.<i>
roundAvatar = true,
characters = 40, <i> numero de caracteres que se mostrara<i>
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=20,
adminBlog='Fernando Salas';
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="http://blog.kangismet.net/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script>
Como podría modificar los comentarios para hacerle sólo un borde al comentario y a su avatar?
ResponderEliminarMil gracias
Dime si te resulta de esta manera:
EliminarVe a tu plantilla y buscan la siguiente linea (Ctrol + F)
]]></b:skin>
Justo por encima de ]]></b:skin> pega el siguiente código
.comments .comments-content .user{font-style:normal;font-weight:bold}
.comments .avatar-image-container{float:left;max-height:50px;overflow:hidden;width:50px;background:#f5f5f5;border-radius:100%;margin:5px;}
.comments .avatar-image-container img{max-width:45px;height:45px;padding:4px;border-radius:100%;}
.avatar-image-container{border:1px solid #ccc;float:left;max-height:45px;overflow:hidden;padding:5px;width:45px}
Espero que te sirva y dime si te resulto
Hola Fernando, muchas gracias por tu ayuda, al final no me ha servido porq aunque es redondo y lo intento poner cuadrado no queda encajado en la imagen del avatar sino que es más grande por el lado derecho y no consigo encajarlo.
EliminarGracias de nuevo
saludos
Fernando después de navegar y buscar ayuda he llegado a tu blog. Cordial saludo.
ResponderEliminarMira tengo problemas al responder a comentarios que hacen en mi blog: vintageymanualidades.blogspot.com Bueno trato de dar respuesta y me sale un recuadro para unirme a google+, yo no quiero eso, casualmente esto me empezó a ocurrir después que me retire de google+. en Configuracion comentarios aparece solo ubicación y el resto de opciones no aparece. Ya no se que hacer. Agradezco tu ayuda.
La verdad que te mentiría si te daría una respuesta a tu comentario. No se que problemas tengas con google+, no te puedo dar una solución a lo que no tengo idea.
EliminarEspero que sepas disculparme
Gracias por tu respuesta. Continuare para solucionar este mal.
EliminarUn abrazo.
Que tal amigo pero me podrias decir como poner los botones en tu formulario en la parte que dice Comvertir tu comentario en html y abajo tienes como tres botones como lo haces saludos
ResponderEliminarOK! en uno de estos días estaré con ese tutorial.
EliminarSaludos
Hola gracias por tu tutorial a mi lo que me gustaria es personalizar donde dice al final del post ("10"comentarios ) Me gustaria poner eso centrado y un poco mas grande es posoble?
ResponderEliminarGracias anticipadas
¡Hola! estoy iniciando mi blogg y aun soy novata en esto ... a mi no me funciona y no se si sea porque tengo un salto de linea. Espero tu respuesta y quisiera ayuda en otras áreas :)
ResponderEliminarEn nuestro menu busca "OTRO TEMA" y deja tu publicación en que deseas que te ayudemos
Eliminar