The Dai Li // An Avatar: the Last Airbender Topsite

Últimos comentarios Los comentarios más recientes en la sidebar

El otro día me preguntó Juan Franco sobre el widget “Alguien dijo algo...” que tengo en mi sidebar, no es que tenga mucha utilidad mostrarlos, es sólo un capricho bloggero (¿o se escribe bloguero?).

La forma más simple y rápida recomendada no por mí, sino por Blogger in Draft es añadir un gadget de Amanda de Blogger Buster. Entra a Blogger Gadget y click en Add it now! o desde Diseño | Elementos de la página | Añadir un gadget, ahora en Destacados y en Recent Comments.

Lo que se crea es in iFrame que no podemos aplicarle CSS, sólo la configuración como cantidad de comentarios a mostrar, cantidad de letras y la altura del iFrame, siempre con el riesgo de que un buen día deje de funcionar sin aviso.



Otra manera que me gusta más es usar el gadget Feed y algo de CSS.
Vamos en Diseño | Elementos de la página | Añadir un gadget | Feed y en URL del feed pondremos el feed de comentarios de nuestro blog:

http://estadoavatar.blogspot.com/feeds/comments/default

Desde luego en lugar de estadoavatar colocas la dirección de tu blog.

Y damos click en Continuar, en este ejemplo coloqué de Título Comentarios recientes, prefiero no mostrar la fecha pero sí a los Autores/fuentes del elemento y click en Guardar y es todo, bueno casi todo, falta el CSS.



Primero averigüemos el ID de ese elemento, supongo que en la mayoría de los casos es Feed1 porque pocos lo agregan, de no estar seguro entra en Diseño | Edición de HTML y marca Expandir plantillas de artilugios, si es que no sabes encontrar el ID manten precionado CTRL y presiona F y en mi ejemplo buscaría Comentarios recientes, un código igual o similar a este aparecerá:

<b:widget id='Feed1' locked='false' title='Comentarios recientes' type='Feed'>

Lo que está en verde es el ID, y será ese el que usaremos en el CSS.

En Edición de HTML añadimos las definiciones antes de ]]></b:skin>

#Feed1 .widget-content {
border:1px dotted #000;
}
#Feed1 .widget-content .item-date {
display:block;
}
#Feed1 .widget-content .item-author {
display:block;
font-weight:bold;
}
#Feed1 li {
background: transparent url(http://estadoavatar.blogspot.es/img/comments.png) no-repeat 0px 4px;
border-bottom: 1px dotted #223344;
border-top: 1px dotted #223344;
margin-bottom: -1px !important;
padding: 2px 0 2px 33px;
}
#Feed1 li:hover {background-color: #171E27;}
#Feed1 a, #Feed1 a:link, #Feed1 a:visited {color: #BBB;}
#Feed1 a:hover {color: #DDD;}

Esas fueron las que yo apliqué, podrían ser otras.



Otra opción es usar alguna variante de Recent Comments Widget como la de Rosa y JMiur.

En Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:

<style type="text/css">
#ultimosComentarios li {
background: transparent url(http://estadoavatar.blogspot.es/img/comments.png) no-repeat 0px 4px;
border-bottom: 1px dotted #223344;
border-top: 1px dotted #223344;
margin-bottom: -1px !important;
padding: 2px 0 2px 32px;
}
#ultimosComentarios li:hover {background-color: #171E27;}
#ultimosComentarios a, #ultimosComentarios a:link, #ultimosComentarios a:visited {color: #BBB;}
#ultimosComentarios a:hover {color: #DDD;}
</style>
<div id="ultimosComentarios">
<script type="text/javascript">
function showrecentcomments(json) {
for(var i=0; i < a_rc; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(m_rc==true)document.write(k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');
document.write('<li><b>' + b_rc.author[0].name.$t + '</b>');
if(n_rc==true)document.write(f_rc);
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < o_rc) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,o_rc);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li>');
}
}
</script>

<script type="text/javascript">
var a_rc=5;
var m_rc=false;
var n_rc=false;
var o_rc=60;

</script>

<script src="http://estadoavatar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>


Para evitar posibles errores lo dejo en este documento de texto, sólo es copiar y pegar, recuerda cambiar la parte de estadoavatar por el de tu blog.

  var a_rc=7;       Es la cantidad de comentarios a mostrar
var m_rc=false; Si es true la fecha se mostrará
var n_rc=false; Si es true todo se mostará en una línea
var o_rc=60; Es la cantidad de letras por comentario a mostrar


Este es el que estoy usando. El CSS está incluído en el gadget y no hay necesidad de modificar la plantilla.
Para más detalles puedes leer Ultimos comentarios YA MISMO y Solucionando scripts: Últimos comentarios en la sidebar en Vagabundia.


Usando este otro se mostrará una imagen para el autor:
Lo mismo que en el anterior se va a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y le pegamos lo siguiente:

<style>
#ultimasopiniones .bbrecpost {
border-bottom: 1px dotted #99AABB;
border-top: 1px dotted #223344;
}
#ultimasopiniones .bbrecpost:hover {
background-color: #171E27;
}
#ultimasopiniones .bbrecpostsum {
margin:0 0 10px 0;
border-bottom: 1px solid #223344;
}
#ultimasopiniones .bbrecpostsum:hover {
background-color: #171E27;
}
#ultimasopiniones img {
margin:0 3px 0 0;
width: 16px;
height:16px;
}
</style>
<div id="ultimasopiniones">
<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var photoslink=new Array()
photoslink[0]='<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png"/>';
autor='<img src="http://lh6.ggpht.com/_7FKsLpdNk4k/SsYTXgKZpyI/AAAAAAAAIVs/KDl9URK3JHk/Blogger_Bonzu.png"/>';
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';

alturl = alturl.replace("#", "#");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Ene";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Abr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ago";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dic";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<s[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showcommentdate == true) document.write('El ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');

if( entry.author[0].name.$t == 'Bonzu Pipinpadaloxicopolis III'){ document.write(autor)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + ':' +'</a> ');
if (showposttitle == true) document.write(' en ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"><br/></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(Leer más)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}

</script>
<script type="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = false;
var numchars = 50;
var standardstyling = false;
</script>
<script src="http://estadoavatar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>


También dejo otro documento de texto para evitar posibles errores. Se debe cambiar estadoavatar por la de la url de tu blog, igual que en el anterior el CSS está en el gadget y no se modificó la plantilla.

autor='<img src="http://lh6.ggpht.com/_7FKsLpdNk4k/SsYTXgKZpyI/AAAAAAAAIVs/KDl9URK3JHk/Blogger_Bonzu.png"/>';
Contiene la imagen para mostrar del autor del blog.

En donde dice Bonzu Pipinpadaloxicopolis III va el nombre idéntico al que usas para comentar.

Recomiendo leer Últimos comentarios personalizados con icono del Escaparate de Rosa.


Debo aclarar que en todos los casos incluí modificaciones mías, en este blog de pruebas tengo los cuatro sistemas para mostrar comentarios, tiene una copia de esta plantilla y funcionan muy bien hasta la fecha.

Ir al formulario 2 Comentarios:

Juan Franco dijo...

Gurú,

ay!! No sbía que era tan importante como para hacer una entrada solo por una pregunta mía :) . De todos modos gracias por hacerme propaganda y por al gadget. Seguramente te voy a seguir preguntando cosas de blogger por que me gusta mucho el diseño de tu página. Te recomiendo hacer un movimientos de imagenes o no se como se llama. Se trata de una barra en la que pones varias imágenes y estas van en direccion para arriba. podes ponerle hypervínculo y cuando se pone el mouse encima, el dezplazamiento es más lento. Mira un ejemplo en www.Tododenintendods.blogspot.com en donde dice "Mejores juegos de DS".
podes hacerlo para los diferentes idiomas de los videos y las deiferentes temporadas, o sino los afiliado de tu página (obiamente contá la mái, voy a ver como me afilia :) ). te lo mando por mail por que este comentario no me deja ponerlo.

El Gurú

Bonzu Pipinpadaloxicopolis III dijo...

Entonces tendré muchos posts por publicar :P, ya antes había visto ese efecto pero no sé, no me convence pero gracias.

Publicar un comentario

De preferencia lea mi política de comentarios.

Puede comentar con su cuenta Google (Google +, Blogger, Youtube, etc.)

En caso de que usted no disponga de una cuenta seleccione Nombre/URL donde dice "Comentar como:" coloque su nombre o pseudónimo, y en URL la dirección de su página (como la de Facebook, Twitter u otra) y recuerde que la dirección web debe iniciar con http://

Al comentar puede utilizar algunos códigos HTML
En negrita <b>texto</b>
En itálica <i>texto</i>
Crear un enlace <a href="url-de-la-página">Texto</a>


Si el formulario anterior no funciona puede enviar su comentario utilizando los métodos antiguos:
En una pequeña ventana emergente
⇧ Ir arriba Comentar en una nueva pestaña