Entradas aleatorias con imagen en miniatura : Recursos Blogger

Entradas aleatorias con imagen en miniatura

en 5:53 Etiquetas: Entradas aleatorias, Gadgets

El siguiente gadget permite añadir en el sidebar de nuestro blog de blogger 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.

→ Paso 1

Ir a Escritorio Blogger.
Seleccionamos Plantilla.
Hacemos clic en Editar HTML.

En el buscador de código pegamos lo siguiente:

]] ></b:skin>

Encima de este pegar el siguiente código:

#random-posts img {
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:70px;
height:70px;
padding:3px;
}
#random-posts li {
list-style-type: none;
}

→ Paso 2

En el Escritorio Blogger
Diseño.
Añadir un Gadget donde queramos poner el gadget.
Seleccionamos HTML / JavaScript.

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) + "…";
                };
                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 = "URL de la Imagen"
                        }
                    }
                };
                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>

rdp_thumb = poner URL de la imagen cuando el post no contenga
var rdp_numposts = 5; número de entradas que quieres mostrar. Se encuentra en la linea 3.

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)