Un bloguero Practicando

Gadget de Entradas Aleatorias al azar con imagen en miniatura

Gadget de Entradas Aleatorias al azar con imagen en miniatura

Comparteme :


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
  • Ir a Escritorio Blogger.
  • En el menú seleccionamos Plantilla.
  • Hacemos clic en Editar HTML.
  • En el código buscamos lo siguiente:
]] ></b:skin>
  • Encima de ello tenemos que 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
 }
  • En el Escritorio Blogger hacemos clic en Diseño.
  • Hacemos clic en Añadir un Gadget donde queramos poner el gadget.
  • En la lista 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) + "&#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 que está en amarillo



Comparteme :
Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Gadget de Entradas Aleatorias al azar con imagen en miniatura.
Comparte

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador