Personalizar comentarios de blogger a estilo compacto destacando comentarios de autor

Los comentarios son una de las cosas mas importantes de un blogs, es el medio en que los lectores se expresan de acuerdo al tema de las entradas.

Por eso en esta ocasión les quiero enceñar como agregar este estilo compacto y colorido a nuestros comentarios, destacando los comentarios del autor o autores. quedaran como están en la imagen de arriba, ademas muestra en numero de comentarios en en blogs, estilo nube.

Para agregar el estilo compacto a nuestros comentarios ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

/*destacar comentarios de autor http://www.mdtutoriales.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8/*clolor 1 a cambiar*/}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;/*clolor 2 a cambiar*/border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8/*clolor 3 a cambiar*/}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-tpZVPArD4o8/UVpPztmtTdI/AAAAAAAAAh8/Y8xmICUHa44/s1600/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*para mas info vistia http://www.mdtutoriales.blogspot.com*/

 En color Azul he dejado descastado por si lo quieres cambiar a otros colores, lo que por defacto esta en rojo( pues ese es el color de mi blog).

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

Avatares redondeados en los comentarios animados de blogger

El codigo pertenece a Karla de Compartidisimo que muy generosamente lo ha compartido con



Para añadir estos estilos a tu blog ve a la Edicion HTML de tu blog y pegas después de ]]></b:skin> lo siguiente :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>

La parte que puse de rojo son los valores que puedes editar, para cambiar los colores, donde en:

.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en "cajitas".

.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.

.comments .avatar-image-container, puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos. *Ver actualización abajo.

Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.

Como colocar Emoticones para los Comentarios Anidados en Blogger

Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F" 

Aprenderemos a colocar los famosos emoticones que tanto nos gustan, pero esta ves sera en los comentarios animados de blogger


A continuacion les muestro los emoticones incluidos.

Para agregar estos emoticones ve a la Edicion HTML de tu blog y con los artilugios expandidos pega ante de</body> lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/emoticonesblogger.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Ahora busca la siguiente linea:

<div class='post-footer-line post-footer-line-3'/>

Y debajo de ella agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><input onclick='if(this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;){this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;;this.value = &apos;Ocultar Contenido&apos;;}else{this.parentNode.getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.value = &apos;Mostrar Emoticones&apos;;}' type='button' value='Mostrar Emoticones'/><div style='display: none;'><div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :)<br/> <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X(<br/> <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool:<br/> <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry:<br/><img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/> :blaf:<br/> <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky:<br/> <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo:<br/> <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted:<br/> <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D<br/> <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops:<br/> <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :?<br/> <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :f:<br/> <img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba:<br/> <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp:<br/> <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>
</div></div></b:if>

Por ultimo guardas los cambios,con el ultimo paso estamos agregando los codigos para que las personas sepan que codigo pertenece a que emoticon.Puedes ver los emoticones funcionando en el siguiente blog.

vía: mil trucos blogger