Random posts para Blogger

Código javascript de random posts, para você adicionar num elemento de página na barra lateral ou em qualquer outra parte de um blog feito no Blogger. O gadget irá exibir random posts com imagens, título do artigo e resumo do texto. Mas, caso você desejar exibir somente os títulos dos artigos, somente os títulos com as imagens ou somente os títulos com os resumos, basta fazer os ajustes no CSS que está junto com o javascript.

Imagem: www.forum.blender-pt.com
Logo abaixo, temos três exemplos de visualizações do gadget (imagem+título+resumo, somente títulos e imagem+título):



Este é o código completo do random posts, para você adicionar num elemento de página do seu Blogger (painel de controle ==> Layout ==> Adicionar um Gadget ==> HTML/JavaScript ==>Adicione o código do random posts ==> Clique em "Salvar"):

<style>

#random-posts img {border-radius: 10px; float: left; margin-right: 5px; width: 80px; height: 80px; display: yes !important; background-color: #eee !important; padding: 3px; transition: all 0.2s linear 0s;}

#random-posts img:hover {opacity: 0.6;}

ul#random-posts {list-style-type: none;padding: 0px;}

#random-posts a {font-size: 14px; text-transform: none; padding: 0px auto 5px;}

#random-posts a:hover {text-decoration: underline;}

.random-summary {font-size: 11px; float: left; display: yes !important; background: none; padding: 1px; margin-right: 3px;}

#random-posts li {margin-bottom: 1px; border-bottom: 1px solid #ddd; padding: 4px;}

</style>



<ul id='random-posts'>

<script type='text/javaScript'>

var randomposts_number = 5;

var randomposts_chars = 100;

var randomposts_details = 'no';

var randomposts_comments = 'Comments';

var randomposts_commentsd = 'Comments Disabled';

var randomposts_current = [];

var total_randomposts = 0;

var randomposts_current = new Array(randomposts_number);



function randomposts(json) {

    total_randomposts = json.feed.openSearch$totalResults.$t

}

document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');



function getvalue() {

    for (var i = 0; i < randomposts_number; i++) {

        var found = false;

        var rndValue = get_random();

        for (var j = 0; j < randomposts_current.length; j++) {

            if (randomposts_current[j] == rndValue) {

                found = true;

                break

            }

        };

        if (found) {

            i--

        } else {

            randomposts_current[i] = rndValue

        }

    }

};



function get_random() {

    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));

    return ranNum

};

</script>

<script type='text/javaScript'> 

function random_posts(json) {

    for (var i = 0; i < randomposts_number; i++) {

        var entry = json.feed.entry[i];

        var randompoststitle = entry.title.$t;

        if ('content' in entry) {

            var randompostsnippet = entry.content.$t

        } else {

            if ('summary' in entry) {

                var randompostsnippet = entry.summary.$t

            } else {

                var randompostsnippet = "";

            }

        };

        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");

        if (randompostsnippet.length < randomposts_chars) {

            var randomposts_snippet = randompostsnippet

        } else {

            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);

            var whitespace = randompostsnippet.lastIndexOf(" ");

            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";

        };

        for (var j = 0; j < entry.link.length; j++) {

            if ('thr$total' in entry) {

                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments

            } else {

                randomposts_commentsnum = randomposts_commentsd

            }; if (entry.link[j].rel == 'alternate') {

                var randompostsurl = entry.link[j].href;

                var randomposts_date = entry.published.$t;

                if ('media$thumbnail' in entry) {

                    var randompoststhumb = entry.media$thumbnail.url

                } else {

                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4whq4wv1T1aXOUkQXZpnUqQ7jSvXWQRrPRiJLXO_4ohz_P4dMjO2LergOKAsWz_1LIPB0_o-VRSnF079CYuMf4RKvqEXK0pdZW_rWxWsZIWxGV-f5CnXxP4MqC9N2jN_PhDnsJyvkkk/s1600/no_thumb.png"

                }

            }

        };

        document.write('<li>');

        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');

        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');

        if (randomposts_details == 'yes') {

            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'

        };

        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')

    }

};

getvalue();

for (var i = 0; i < randomposts_number; i++) {

    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')

};

</script>

</ul>

Estes são alguns ajustes básicos que você poderá fazer no código do random posts:

a)O "#random-posts img" controla a largura e altura das imagens: width: 80px; height: 80px.
b)Controlar a exibição das imagens: "display: yes !important" = exibe as imagens, "display: none !important" = não exibe as imagens.
c)#random-posts a - Controla o tamanho da fonte dos títulos
d)Para alterar os títulos para letras maiúsculas, o "text-transform: none" deve ser alterado para "text-transform: uppercase".
e)Em "#random-posts a:hover", troque o "text-decoration: underline" por "text-decoration: none", caso não deseje que o título seja sublinhado ao passar o cursor do mouse.
f)O ".random-summary" - É a parte responsável por controlar os ajustes dos resumos dos artigos. Para não exibir o resumo, substitua o "display: yes !important" por "display: none !important". Dá para alterar o tamanho da fonte "font-size: 11px".
g)Em "#random-posts li", você controla a largura, cor da linha e distância entre os artigos exibidos no gadget do random posts.

Vejamos agora, alguns ajustes no código javascript do random posts:

a)var randomposts_number = 5; - Controla o número de artigos que serão exibidos no gadget do random posts.
b)var randomposts_chars = 100; - Controla a quantidade de caracteres que serão exibidos nos artigos do gadget do random posts.
c)var randomposts_details = 'no'; - Controla a exibição de data e comentários nos artigos. Caso queira exibir (não recomendo isso), basta trocar o "no" por "yes".

Estas são dicas básicas para você fazer ajustes no código do random posts. É claro, que é possível fazer muito mais modificações, basta ter um pouco de conhecimento e boa vontade!