Gadget de entradas por autores para Blogger | Oloblogger Andaba el otro día por el foro de ayuda de Blogger y alguien preguntó por un gadget de autores similar a otro que existía para WP. La verdad...

7 de febrero de 2017

Gadget de entradas por autores para Blogger

Andaba el otro día por el foro de ayuda de Blogger y alguien preguntó por un gadget de autores similar a otro que existía para WP. La verdad es que no llegué a ver ese gadget pero por las explicaciones me hice una idea y pensé que podría ser útil para blogs con varios autores.

Como creo que no lo he hecho nunca aclaro antes de seguir que todo lo que se puede hacer en una plataforma se puede hacer en la otra... siempre que se cuenten con los mismos recursos. Esto quiere decir simplemente que si algo por ejemplo requiere PHP y para ello un hosting que lo soporte, pues que para ambos sitios necesitaré ese soporte. Lo que no podemos hacer -salvo que seamos santos- son milagros, pero con los mismos recursos se puede hacer lo mismo y la plataforma pasa a ser prácticamente indiferente.

Dicho esto mi visión de este tipo de gadget en el que saldrán todos los autores que hayan publicado recientemente (últimas 150 entradas como máximo) es como el de la siguiente captura. En ella se aprecia que se verán los avatares de cada uno de ellos y debajo las últimas X entradas que ese autor haya creado. Pinchando en el avatar de cada uno el contenido irá cambiando para mostrar lo de cada cual.

El formato lo he adaptado para incluirlo en una barra lateral.

Gadget autores para Blogger

Esta vez por premura de tiempo sólo voy a proponer un corta-pega para un gadget tipo HTML/JavaScript, pero al final de esta entrada pondré una demo y aquí tenéis un acceso al código montado en Codepen. Si accedéis en modo edición podréis experimentar con el código para entender mejor su funcionamiento o incluso montar alguna variación. Lo que hace básicamente es leer el feed, guardar los datos necesarios, ordenarlos por autor y luego mostrar unas cuantas entradas de cada uno.

Lo que hay que cambiar para personalizar algunas cosas está marcado en otro color, aunque más adelante también lo detallo.

<div id="obautores"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>//<![CDATA[
// Parámetros configurables
var url = 'http://www.musicaememorandum.com';
var totalposts = 30; // Número de entradas a leer (Máximo 150)
var maxposts = 5; // Máximo de entradas a mostrar por autor
var comenzarpor = 190; // 1 para empezar por el post más moderno
var granavatar = false; // True/False para ver o no avatar grande
// No necesitas cambiar nada a partir de aquí
$(document).ready(function(){var a=$("#obautores");$(a).prepend('<div class="bloading"/>');var b=new Array;$.getJSON(url+"/feeds/posts/default?orderby=published&start-index="+comenzarpor+"&max-results="+totalposts+"&alt=json&callback=?").done(function(c){c.feed.entry.length;$.each(c.feed.entry||[],function(a,c){c.author[0].name.$t&&(b[a]=new Array,b[a][0]=(c.author[0].name.$t||"").replace(/\"/g,"´"),b[a][1]=new Date(c.published.$t||Date.now()),b[a][2]=c.title.$t||"",b[a][3]=(c.link||[]).slice(-1)[0].href,b[a][5]=c.author[0].gd$image.src||"")}),b.sort(function(a,b){return a[0]>b[0]?1:a[0]<b[0]?-1:a[1]<b[1]?1:a[1]>b[1]?-1:0}),$(".bloading").remove(),$(a).append('<ul class="obautor"></ul>'),$(a).append('<div class="obautortab"></div>');for(var f=0;f<b.length;f++){var g=b[f][0],h=g.replace(/\s/g,"");if(0==f||g!=b[f-1][0]){var i=1,j='<img title="'+g+'" alt="'+g+'" src="'+b[f][5]+'"/>';$(".obautor").append('<li><a href="#'+h+'">'+j+g+"</a></li>"),$(".obautortab").append('<div id="'+h+'"><h4>'+g+'</h4><ul><li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li></ul></div>"),granavatar?$(j).insertAfter("#"+h+" h4"):$("#"+h+" h4").prepend(j)}else i<maxposts&&(i++,$("#"+h+" ul").append('<li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li>"))}$(".obautortab div").hide(),$("ul.obautor li:first").addClass("activa").show(),$(".obautortab div:first").show(),$(".obautor li").click(function(){$("ul.obautor li").removeClass("activa"),$(this).addClass("activa"),$(".obautortab div").hide();var a=$(this).find("a").attr("href");return $(a).fadeIn(),!1})}).fail(function(){a.append("Errror")})});
//]]></script>
<style>#obautores {max-width: 300px;font-family:arial;margin:0 auto;padding: 10px 0 0 0;box-sizing:border-box;}
#obautores img {padding:0;margin:0;border:0;}
ul.obautor{width:100%;margin:0 auto;padding:0 0 10px 0;list-style:none;font-size:0;line-height:0;text-align:center;}
.obautor li{display:inline-block;vertical-align: middle;width: 33.33%;height:0;padding-bottom: 33.33%;overflow:hidden;position:relative;box-sizing:border-box;}
.obautor li a{display: inline-block;vertical-align: middle;overflow: hidden;position: relative;width:100%;height:0;padding-bottom: calc(100% - 10px);border:5px solid #fff;box-sizing:border-box;border-radius: 50%;}
.obautor img {position:absolute;top:0;left:0;max-width:100% !important;min-height:100%;}
.obautor li.activa a {border-color:#333;}
.obautor li:hover a{border-color:#999;}
.obautortab {text-align:center;width:100%;display: block;font-size:16px;box-sizing:border-box;}
.obautortab img {width: 100%;}
.obautortab h4 {margin:0; border:1px solid #333;background: #ccc;text-align:center;font-size: 18px;line-height:38px;}
.obautortab h4 img {float:left;width:38px;height:38px;border-right:1px solid #333;}
.obautortab ul {padding:0;margin:0;list-style:none;}
.obautortab li {background:#ccc;padding:10px;text-indent:0;}
.obautortab li:nth-child(odd) {background:none;}
.obautortab a {display:block;text-decoration:none;color: #000;text-align:left;}
.obautortab a:hover {text-decoration:underline;}</style>

En primer lugar marqué la carga de la librería jQuery, pues si ya la tenemos cargada para otros gadgets o plugins es innecesario cargarla de nuevo. En el caso de que ya la tuvierais, toda esa línea se puede suprimir.

Luego vienen 5 parámetros que son los únicos que en principio tendremos que cambiar para que el gadget esté personalizado a nuestro gusto:

  • url: Aquí hay que poner la dirección del blog del que se pretenden obtener los autores (sin barra al final)
  • maxposts: El número de posts que como máximo vamos a mostrar para cada autor y así evitar hacer un gadget interminable
  • totalposts: Vamos a leer un feed y como eso es lento, aquí iría una cifra con el número total de entradas a leer
  • comenzarpor: start-index, o el número del post desde el que empezaremos a leer el feed. 1 para comenzar por el más reciente; 10 para saltarnos los 8 más recientes; etc.
  • granavatar: Con true bajo el nombre del autor saldrá su avatar en tamaño muy grande. Con false saldrá más pequeño y a la izquierda del nombre.

Y por fin la demo. Pinchad en cada avatar para observar los cambios:



¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

44 comentarios :

  1. Utilizando http://mi-blog-de-prue-ba.blogspot.com en el Codepen de este gadget de autores, se queda eternamente cargando.

    Si, además, fijo a 1 la variable comenzarpor, ya veo el último artículo (aunque tiene varios y maxposts vale 5) de un autor (aunque el blog tiene dos; uno de ellos, que es el que se muestra, también administrador).

    Ese mismo URL (http://mi-blog-de-prue-ba.blogspot.com), sin embargo, no presenta ningún comportamiento extraño al ser utilizado en http://codepen.io/oloman/pen/NxjpvP, el Codepen de tu lector de "feed" completo para Blogger.

    ¿Tienes idea de qué puede estar yendo mal en tu gadget de autores?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Nice article. All the sections of your site covered with great functions. I really like the content and discussions on your site. Thanks a lot for allowing me to join. I love to see more about GB WhatsApp. Keep sharing and updating. Also share more posts with us. Thank you.

      Eliminar
  2. Y perdona que añada este comentario adicional para comprobar que me he suscrito correctamente a los comentarios de este artículo.

    ResponderEliminar
    Respuestas
    1. Hola. Lo que está yendo mal es que se deben evitar las comillas dobles en las cadenas cuando estas se van a manipular con JavaScript, ya que eso genera cosas como las que vistes.
      Simplemente con que elimines dichas comillas de tu nick, verás que todo (o casi todo) va bien. También ocurre lo mismo con los títulos de los artículos.

      En su lugar lo más eficiente es usar comillas simples (') en lugar de las dobles (").

      De todas formas también se puede ajustar el código para que las sustituya automáticamente antes de tratarlas. Mira ahora en el Codepen y prueba de nuevo con tu dirección.

      Eliminar
    2. Pues me temo que sigue sin ir, con el estado actual de Codepen y haciendo un uso despreocupado de las comillas dobles en mi blog de prueba. :)

      http://mi-blog-de-prue-ba.blogspot.com.es/2017/02/el-gadget-de-oloman-me-sigue-dando-error.html

      Eliminar
    3. He llegado a algo que sí parece funcionar:

      http://mi-blog-de-prue-ba.blogspot.com.es/2017/02/ya-tengo-un-gadget-autores.html

      Gracias, no lo habría conseguido sin basarme en tu ejemplo.

      Eliminar
    4. De nada. Experimentar es un placer ;)

      Eliminar
  3. Queda fenomenal.Muchas gracias.
    ¿Es posible poner de otro color los rectángulos de las entradas?

    ResponderEliminar
    Respuestas
    1. Claro. Sólo tienes que cambiar las propiedades del CSS, que es lo que está entre las etiquetas STYLE.
      Si quieres otro color tendrás que cambiar concretamente el BACKGROUND de .obautortab li

      Eliminar
  4. Muchísimas gracias por tu pronta respuesta,eres genial!!
    Ya quedó listo

    ResponderEliminar
    Respuestas
    1. Hoy me pillaste poniéndome al día tras más de dos semanas de atraso, así que simplemente tuviste suerte ;)

      Eliminar
  5. Hola Oloman.
    Perdona mi ignorancia, pero tengo un problema:
    _No se como modificar el html de una entrada de mi blog que tiene errores en etiquetas de título del mismo.
    Gracias.

    ResponderEliminar
    Respuestas
    1. La ignorancia no hay que perdonarla sino simplemente reducirla en lo posible ;)

      Por ejemplo yo ignoro totalmente a qué HTML te refieres, en qué entrada está, cual es su estructura, su función...

      Eliminar
  6. Buenas,
    solo consigo que se muestre una entrada y un autor :(
    http://reclamaciones.eeconsultores.info/

    ResponderEliminar
    Respuestas
    1. Yo también tuve algún problema con el código de Oloman tal cual, pero a partir de ese gadget y de otro (también de Oloman) pude llegar a algo que me funciona:

      http://mi-blog-de-prue-ba.blogspot.com.es/2017/02/ya-tengo-un-gadget-autores.html

      Eso sí, lo particularicé a una sola entrada por autor.

      Espero que te sea de ayuda.

      Eliminar
    2. Lo único que se me ocurre es que al ser un subdominio y sin https, pueda haber algún conflicto E&E

      Eliminar
    3. Me ocurre el mismo problema que Federico, utilizando el Codepen pero con el gadget del indice se queda eternamente cargando.
      Tampoco funciona por tanto dicho índice, lo tengo en esta página de prueba http://prueba2mjh.blogspot.com.es/p/indice.html
      Estuve intentando averiguar lo del conflito E&E pero no entiendo ni encontré más información, es lo único que puede parecerse a mi caso.

      Eliminar
  7. Hola, Oloman:

    Creía estar respondiendo al comentario 6, pero en realidad creé 7. Al ver que tenía oportunidad de eliminar 7, lo hice (tras copiar su contenido para pegarlo como 6.1). Y ahora veo que el 7 borrado deja rastro público, lo que puede tener sentido si ya ha sido contestado, pero si no... No sé. Si puedes y quieres, borra sin rastro 7 y este 8. Y si no, pues no.

    ¡Que pase usted un buen día! :)

    ResponderEliminar
  8. Thank You For sharing This Superb Article with us Keep sharing Best Of luck Best Treadmill Under 30000

    ResponderEliminar
  9. You should take part in a contest for one of the best blogs on the web. I will recommend this site! Best shapewear in India

    ResponderEliminar
  10. Excellent Blog! I would like to thank you for the efforts you have made in writing this post. Best baby diapers in India

    ResponderEliminar
  11. Thank You For sharing This Superb Article with us Keep sharing All the Best
    best hair dryer under 2000

    ResponderEliminar
  12. Your Blog Share Cover All Important Topic of Blogging, Thanks for Share Article Like That.

    ResponderEliminar
  13. Such a nice post. it so interesting. Thanks for posting this out!
    igoal แทงบอล

    ResponderEliminar
  14. Looks Grate entradas Autores Gadget i must Try this on my Blog.

    ResponderEliminar
  15. Very nice blog, Thanks for sharing a great article putting it all together for us, and
    Welcome to my website Sahikhoj

    ResponderEliminar
  16. Hola, todos,
    Te contaré un secreto para enriquecerte con la inversión en bitcoins “una persona sabia debe tener dinero en la cabeza, pero no en el corazón… Todos los días es un día de nuevas decisiones. Es su elección ser rico o ser pobre y seguir luchando, comenzar a generar fondos más grandes en 72 horas con un comerciante legítimo y profesional como yo. Los planes de inversión están abiertos ahora con una inversión mínima de $ 200, puede ganar $ 2000 en 72 horas.

    Invierte $200 gana $2,000
    Invierte $500 gana $5,000
    Invierte $700 gana $7,000
    Invierte $1,000 gana $10,000
    Invierte $2,000 gana $20,000
    Invierte $5,000 gana $50,000
    Invierte $7,000 gana $70,000

    No pierda esta clara oportunidad de lograr su libertad financiera, aquellos que no están listos para invertir ahora no están listos para jubilarse anticipadamente, no dependa de una sola fuente de ingresos, permítanos negociar por usted hoy y comenzar a generar ganancias para usted. Póngase en contacto con nosotros a través de WhatsApp: +1(252)285-2093 Correo electrónico: andersoncarlassettrade@gmail.com

    ResponderEliminar
  17. Nursing is a prevalent choice for upcoming medical professionals because of many reasons. One of the probable reasons can be the recent flow of viruses that made it necessary for hospitals to equip only the most reliable officials. The students will have to still go through theory tests and rigorous training to learn the operation of every piece of equipment. Most practical knowledge is necessary for this environment, and students mostly focus on that aspect throughout their student life. The fact that students often sway towards acquiring help with nursing assignment, is undeniable.

    ResponderEliminar
  18. Thanks for sharing the gadget information and code. It is good to help the user to fibd the latest author with most published articles. Content writing is not an easy job. You need to write it professionally to grab the attention of your reader. You can get the cheap assignment writing services in the UK to write it professionally and in time to get high grades. The best guide to finding good writing services is "user reviews".

    ResponderEliminar
  19. Writing content is not a simple task. To capture your reader's interest, you must write it professionally. You may obtain primary data collection to write it professionally and on time so that you can earn good scores. "User reviews" are the greatest way to locate good writing services.

    ResponderEliminar
  20. As a first time user of Card Factory I found them quick, manomano discount code nhs efficient with a good range of cards.

    ResponderEliminar
  21. Start a grudge match and challenge your friends in high stakes matches! ... Earn packages to unlock new player types, formations, boot designs and much much more! hack score match

    ResponderEliminar
  22. What it basically does is read the feed, save the necessary data, sort it by author, and then display a few entries from each. - utv rentals hurricane utah

    ResponderEliminar
  23. Do you have any idea what might be going wrong with your author gadget? https://www.drywallwinstonsalem willing to help.

    ResponderEliminar
  24. Thanks for the information. It was very helpful.
    residential moving companies

    ResponderEliminar
  25. I appreciate you creating such a knowledge-based and beneficial website. It's an easy concept to comprehend. I admire what you accomplished and I think it was wonderful. If you keep coming up with fascinating and innovative ideas like I got assignment service online, I want to hear from you again. One of my go-to sources for guidance on academic writing.

    ResponderEliminar
  26. I always visit your blog, to get some information and some tips, Now I am looking to watch Wlaes vs Iran Live Stream, and curious to watch this match, and quite excited.

    ResponderEliminar
  27. Thanks for the update. Anyway, if you're looking for an air duct cleaning service in Glendale, I recommend you check this site www.airanddryerventcleaningglendale.com.

    ResponderEliminar
  28. also had some problem with the Oloman code as it is, but from that gadget and from another one. I was able to come up with something that works for me.

    Joana | concrete professional

    ResponderEliminar
  29. The Posts by Authors Gadget on Blogger is designed to give your readers an easy way to see all the posts written by a specific author. This can be particularly helpful if you have multiple writers contributing content to your blog, as it allows visitors to quickly find and read posts from their favorite bloggers.

    Anyway, visit https://www.trashremovaltucson.com/ and discover your options for trash removal services in Tucson, AZ.

    ResponderEliminar
  30. I think I first came across your blog via a link on Twitter while looking for exterior painting.. Fancy the content I have seen so far and will definitely return to read more later.

    ResponderEliminar
  31. Again, I appreciate your excellent article. Where else can someone get information of this caliber written in such an ideal manner? Because I have a presentation next week, I'm looking for such information. favorable website; Where did you obtain the post's details? Nonetheless, I'm glad I discovered it and will check back soon to see what other posts you include. We may have come across one of the most helpful blogs yet. Overall, excellent I can appreciate your efforts because I am also an expert in this field and other education services like write my essay uk.

    ResponderEliminar
  32. This is a good post, it teach me many things. Thank for your share! Leer más

    ResponderEliminar