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).

Efectos en todas las imagenes del blogs con CSS3

Para quienes se preguntaban como hacer que las imagenes de todas las entradas tengas bordes redondos,
bueno vamos a aprender a agregarles en efecto de bordes redondeados a las imagenes de nuestro blogs,

Para darle este toque somplemente usaremos CSS3, la cual nos permite hacer esto mediante la declaracion de border-radius
con agregaremos los bordes.

Esto sera sivible siempre y cuando quien vea la página use un navegador moderno

Los estilos los agregaremos a la declaracion

.post-body img {-----------
---------Aqui los estilos-------
----------------------------
}

.post-body img:hover {-----
------Aqui los estilos al pasar en cursor-------
-------------------------------
}

Nota: es por si quieres hacer tus propios estilos o simplemente modifica cualquiera de los ejemplos


Veamos los siguientes ajemplos:

Para agregarlo a sus imagenes simplemente copia copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>

.post-body img {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

o tambien podemos aplicar algunos efectos al pasar el cursor usando la declaracion "hover"
como por ejemplo

 

.post-body img {

border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img : hover {
border-radius:100px 300px 100px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  100px 10px 10px 100px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img: hover {
border-radius:10px 100px 100px 0px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:300px 300px 300px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  300px 300px 300px 300px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}.post-body img:hover {
border-radius:10px 10px 10px 10px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

Es cuestion de jugar con en radio de los bordes para tener un estilo perzonalizado por ejemplo

border-radius: 10px 50px 15px 80px;

Cada valor corresponde a una esquina de la image, en este ejemplo seria:

10px es el borde de la esquina superior izquierda.
50px el borde de la esquina superior derecha.
15px el borde de la esquina inferior derecha.
80px el borde de la esquina inferior izquierda.


En conclusion podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.

Entradas Relacionadas para blogger con CSS

Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.

En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.


Después pega antes de ]]></b:skin> los estilos:

/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;

}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Ahora busca esta línea:

<b:loop values='data:post.labels' var='label'>

Y justo antes del siguiente </b:loop> pega esto:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>

Ya sólo busca esta línea:

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

Y pega debajo de ella lo siguiente:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>

Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.

Muy Importante:

Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.
 
Info: sacado de una planilla de johnytemplate