jueves, 8 de agosto de 2013

Gadget de Entradas Aleatorias (al azar) con imagen en miniatura

8/08/2013 03:11:00 p. m. Por 17 comentarios

Gadget de Entradas Aleatorias


El siguiente gadget permite añadir a nuestra sidebar una lista de entradas aleatorias, elegidas al azar, con una imagen en miniatura como pueden ver en la imagen superior. Para añadirlo a tu blog sigue el siguiente tutorial.

Instalación del Gadget


  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:

  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
  7.  #random-posts img {
         float:left;
         margin-right:10px;
         border:1px solid #999;
         background:#FFF;
         width:70px;
         height:70px;
         padding:3px
     }
    

  8. En el Escritorio Blogger hacemos clic en Diseño.
  9. Hacemos clic en Añadir un Gadget donde queramos poner el gadget.
  10. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  11. En él pegamos el siguiente código:
<ul id='random-posts'>
    <script type='text/javaScript'>
        var rdp_numposts = 5;
        var rdp_snippet_length = 150;
        var rdp_info = 'yes';
        var rdp_comment = 'Comentarios';
        var rdp_disable = 'Comments Disabled';
        var rdp_current = [];
        var rdp_total_posts = 0;
        var rdp_current = new Array(rdp_numposts);

        function totalposts(json) {
            rdp_total_posts = json.feed.openSearch$totalResults.$t
        }
        document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');

        function getvalue() {
            for (var i = 0; i < rdp_numposts; i++) {
                var found = false;
                var rndValue = get_random();
                for (var j = 0; j < rdp_current.length; j++) {
                    if (rdp_current[j] == rndValue) {
                        found = true;
                        break
                    }
                };
                if (found) {
                    i--
                } else {
                    rdp_current[i] = rndValue
                }
            }
        };

        function get_random() {
            var ranNum = 1 + Math.round(Math.random() * (rdp_total_posts - 1));
            return ranNum
        };
    </script>
    <script type='text/javaScript'>
        function random_posts(json) {
            for (var i = 0; i < rdp_numposts; i++) {
                var entry = json.feed.entry[i];
                var rdp_posttitle = entry.title.$t;
                if ('content' in entry) {
                    var rdp_get_snippet = entry.content.$t
                } else {
                    if ('summary' in entry) {
                        var rdp_get_snippet = entry.summary.$t
                    } else {
                        var rdp_get_snippet = "";
                    }
                };
                rdp_get_snippet = rdp_get_snippet.replace(/<[^>]*>/g, "");
                if (rdp_get_snippet.length < rdp_snippet_length) {
                    var rdp_snippet = rdp_get_snippet
                } else {
                    rdp_get_snippet = rdp_get_snippet.substring(0, rdp_snippet_length);
                    var space = rdp_get_snippet.lastIndexOf(" ");
                    rdp_snippet = rdp_get_snippet.substring(0, space) + "&#133;";
                };
                for (var j = 0; j < entry.link.length; j++) {
                    if ('thr$total' in entry) {
                        var rdp_commentsNum = entry.thr$total.$t + ' ' + rdp_comment
                    } else {
                        rdp_commentsNum = rdp_disable
                    };
                    if (entry.link[j].rel == 'alternate') {
                        var rdp_posturl = entry.link[j].href;
                        var rdp_postdate = entry.published.$t;
                        if ('media$thumbnail' in entry) {
                            var rdp_thumb = entry.media$thumbnail.url
                        } else {
                            rdp_thumb = "http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"
                        }
                    }
                };
                document.write('<li>');
                document.write('<img alt="' + rdp_posttitle + '" src="' + rdp_thumb + '"/>');
                document.write('<div><a href="' + rdp_posturl + '" rel="nofollow" title="' + rdp_snippet + '">' + rdp_posttitle + '</a></div>');
                if (rdp_info == 'yes') {
                    document.write('<span>' + rdp_postdate.substring(8, 10) + '/' + rdp_postdate.substring(5, 7) + '/' + rdp_postdate.substring(0, 4) + ' - ' + rdp_commentsNum) + '</span>'
                }
                document.write('<div style="clear:both"></div></li>')
            }
        };
        getvalue();
        for (var i = 0; i < rdp_numposts; i++) {
            document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
        };
    </script>
</ul>

Puedes cambiar el número de entradas que quieres mostrar, para ello modifica el número subrayado en amarillo


17 comentarios :

  1. Gracias, lo acabo de incorporar a mi blog.
    Gran pagina, saludos.

    ResponderEliminar
  2. No sé por qué cuando lo agrego se queda cargando la página y no pasa más nada, ni siquiera el blog carga. ¿Alguna razón?

    ResponderEliminar
    Respuestas
    1. He estado probando el gadget en mi blog y funciona correctamente. Comprueba que copias cada parte del código en su sitio. Un saludo.

      Eliminar
  3. Gracias, estupenda toda la información que compartes. Este script funciona bien, pero el texto aparece debajo de cada imagen en lugar de situarse a la derecha de la imagen, tal y como se aprecia al incio de este artículo, ¿alguna solución para resolver este inconveniente estético?

    ResponderEliminar
    Respuestas
    1. Probablemente se deba a la anchura de la barra lateral de tu blog, que no sea suficientemente grande. Prueba a reducir el tamaño de las imagenes modificando width:70px y height:70px en la primera parte del codigo que aparece en el tutorial.

      Tambien puedes probar a quitar la fecha y numero de comentarios: var rdp_info = 'no'

      Eliminar
  4. Agradecido por tu aporte. Había probado otros métodos sin que funcionasen y, por lo que veo en las pruebas que he hecho, este funciona correctamente.

    ResponderEliminar
  5. Excelenteeeeee, lo andaba buscando, milllllllllllllllllllllll gracias, un saludo desde Costa Rica <3 !!!

    ResponderEliminar
  6. Holaaa! como puedo hacer para que estas entradas aleatorias me queden en forma horizontal para colocarlos bajo las entradas de mi blog? Gracias x el aporte

    ResponderEliminar
  7. GRACIAS AMIGO ESTUPENDO ME FUNCIONO AL 100% QUIERO SABER COMO PUEDO HACER PARA QUE LAS ENTRADAS ME QUEDEN HORIZONTAL Y HACE MAS GRANDES LA IMAGEN DEL POST

    ResponderEliminar
  8. Gracias me sirvio de mucho busque en otras paginas y no podia hacerlo

    ResponderEliminar
  9. ¡Excelente! ¡Muchas gracias! me gustó mucho, lo agregué a funnycrazyviral.com y funcionó muy bien.

    ResponderEliminar
  10. Que etiquetas debo modificar para mostrar una imagen mas grande?

    ResponderEliminar
  11. Muchas gracias. Funciona de maravilla, pero tengo un problema en el que quizá me puedas ayudar: cuando instalo este script, al momento de querer modificar nuevamente la plantilla me genera un error, diciendo que cierto otro script ha dejado de funcionar o que está ocupado. Aunque en Mozilla esto se arregla deteniendo dicho script, yo uso Chrome y no me deja esa opción, solo se queda cargando ad infinitum. ¿Alguna idea de por qué me causa esto? Gracias.

    ResponderEliminar
  12. Muchas gracias. Funciona de maravilla, pero tengo un problema en el que quizá me puedas ayudar: cuando instalo este script, al momento de querer modificar nuevamente la plantilla me genera un error, diciendo que cierto otro script ha dejado de funcionar o que está ocupado. Aunque en Mozilla esto se arregla deteniendo dicho script, yo uso Chrome y no me deja esa opción, solo se queda cargando ad infinitum. ¿Alguna idea de por qué me causa esto? Gracias.

    ResponderEliminar
  13. Felicidades, hermano. Gracias!
    Solo queda saber cómo ajustarlo como tú lo presentas, jejeje. Saludos.

    ResponderEliminar
  14. me gustaria saber, el mismo codigo, pero que me de la posibilidad de que aparezcan todas las entradas de una misma etiqueta. sin la necesidad de permanentemente modificar el numero ( en este caso 5)
    gracias

    ResponderEliminar
  15. me gustaria saber, el mismo codigo, pero que me de la posibilidad de que aparezcan todas las entradas de una misma etiqueta. sin la necesidad de permanentemente modificar el numero ( en este caso 5)
    gracias

    ResponderEliminar