Lorem Ipsum Dolor .......

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum.......

Comentarios mas coloridos para el Blog

Hola, hoy traigo un truco muy bueno y cool para vuestros comentarios, se trata de cambiar el estilo de los comentarios de blogger por uno mejor, ahora paso a explicar el truco:

1.- En tu HTML busca el siguiente codigo:

/* Comments ----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0; padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0; padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%; margin:0 0 .2em 0;
color:#000000; text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}


2.- Ahora remplazamos este codigo por el siguiente:

/* Comments
----------------------------------------------- */

#comments {
padding-top: 10px;
color: #555;
font-family: 'Trebuchet MS';
}
#comments h4 {
margin: 0px;
padding: 8px 0 0 30px;
font-size: 20px;
color: #555;
background: url(http://andresblogs.googlepages.com/Chat.png) no-repeat;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}
#comments ul {
margin-left: 0;
}
#comments li {
background: none;
padding-left: 0;
}
.comment-body {
background: url(http://compuanimation3d.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}
.comment-body p {
background:#d0d0d0;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}
.comment-body-author {
background: url(http://compuanimation3d.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}
.comment-body-author p {
background:#ccdacc;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}
.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight:bold;
background: url(http://andresblogs.googlepages.com/coments.png) no-repeat 20px 0px;
}
.comment-footer {
padding: 5px 0px 3px 30px;
}
#comments li {
padding: 0 0 1px 17px;
background: url(http://compuanimation3d.googlepages.com/talk1.png) no-repeat 0 3px;
}
.comments-block .comment-body {
background: #fff;
}
.comments-block .comment-footer{
margin: 0 0 0 -10px;
}
.comment-title{
margin: 0 0 0 30px;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Y listo difruten el truco :) .

2 comentarios:

Hallaserke dijo...

Gracias por el consejo! Lo he modificado un poco pero me gusta, me ha sido muy util.
Si quieres visitarlo y ver el resultado, he aqui el link http://hallaserke.blogspot.com/
espero ver tu comentario ahi... :D

Admin dijo...

Gracias! ha quedado muy bien el fondo de mis comentarios. Estaba buscando algo así hace tiempo, de esa manera le doy mayor importancia a los comentarios de quienes generosamente visitan nuestra web. Ya te recomendaré! :)
http://nestavista.com

Publicar un comentario