Código para Mostrar Postagens Aleatórias com Imagens no Blogger

Mostrar listas de posts aleatórios ou postagens relacionadas no blog ajuda a manter as pessoas mais tempo no seu site. Hoje vamos mostrar mais um código para criar um gadget semelhante ao de postagens relacionadas, mas esse mostra o posts de forma aleatória embora seja possível fazer algumas configurações para escolher o que mostrar.

Código para Mostrar Postagens Aleatórias com Imagens no Blogger

Nós já mostramos anteriormente como mostrar postagens aleatórias, mas a vantagem deste código é que permite escolher o tamanho da imagem que será mostrada como miniatura da imagem original do post. Esse código é longo, mas é bem simples de utilizar você só precisa entrar na pagina layout > adicionar gadget > HTML/javascript e colar esse código:
<div id='bp_recent'></div>
<script style='text/javascript'>var postTitleOriginal,myLink, myDiv, myImage,mySeparator;
var main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
postTitleOriginal = postTitle;
if (isNaN(titleLength) || titleLength == 0) {
postTitle = '';
}
else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
var postUrl="";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commentText = entry.link[k].title;
var commentUrl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (showThumbs == true) {
var thumbUrl = "";
try {
thumbUrl = entry.media$thumbnail.url;
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
} catch (error) {
if ("content" in entry) s = entry.content.$t; else s="";
if (thumbUrl == "" && mediaThumbsOnly == false) {
regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
videoIds = s.match(regex);
if (videoIds != null) {
videoId = videoIds[4];
}
if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
}
if (thumbUrl == "" && mediaThumbsOnly == false) {
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
}
}
if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
if (thumbUrl == "" && showNoImage == true)
{
thumbUrl = "http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png";
try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
}
}
if (showPostDate == true) {
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
}
code = "";
main = document.getElementById('bp_recent');
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_title");
myLink = createLink(postUrl,"_top",postTitleOriginal)
if(main.innerHTML!=""){
mySeparator = createDiv("bp_recent_separator");
main.appendChild(mySeparator)
}
if(postTitle != ''){myDiv.appendChild(myLink);}
main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.setAttribute("src", thumbUrl);
if(imgFloat!="none")
{
float_clear=true;
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
}
try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}
try {
if ("content" in entry) {
var postContent = entry.content.$t;
}
else if ("summary" in entry) {
var postContent = entry.summary.$t;
}
else var postContent = "";
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
if (showSummary == true) {
myDiv = createDiv("bp_item_summary");
if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
else {
postContent = postContent.substring(0, summaryLength);
var quoteEnd = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd);
myDiv.appendChild(document.createTextNode(postContent + '...'));
}
main.appendChild(myDiv);
}
} //end try
catch (error) {}
myDiv = createDiv("bp_item_meta");
myDiv.style.clear="both";
myDiv.style.marginBottom="4px";
if (showPostDate == true) {
myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
flag = 1;
}
if (showCommentCount == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
if (commentText == '1 Comments') commentText = '1 Comment';
if (commentText == '0 Comments') commentText = 'No Comments';
var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML=commentText;
flag = 1;;
}
if (showReadMore == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
var myLink = createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML = readMore+" &raquo;";
flag = 1;;
}
if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href", href);}
else myLink.setAttribute("href", href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");
myLink.setAttribute("target", target);
myLink.setAttribute("title", title);
return myLink;
}
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 110;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
hoje = new Date()
var numposts = (5 +(2*(hoje.getSeconds())))
document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");
</script>

Você deve trocar o endereço do seu blog e o numero de imagens que aparece (results=5) neste trecho que está no final do código:

script src=\"http://www.dicasparablogs.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby

Para alterar o tamanho e espaço das imagens procure por esses códigos:
var myMargin = 5; - espaço entre as imagens.
var imgDim = 125; - tamanho das imagens.

Esse gadget usa como base o relógio do computador para mostrar imagens aleatórias por isso ele só deve ser utilizado em blog com mais de 70 postagens para garantir que sempre sejam exibidas as imagens e links.

Você pode usar esse gadget para substituir o gadget de postagens relacionadas, por exemplo, no lugar do LinkWithin ou Nrelate do seu blog, mas não é necessário colocar todo esse código na pagina editar HTML para evitar problemas de codificação. Faça da mesma forma que falamos acima adicione um gadget de HTML/javascript com o código que já mostramos, mas retire a primeira linha do código:
<div id="bp_recent"></div>

Essa div é que fixa o local onde o gadget de imagens aleatórias aparece. Agora entre na pagina modelo > editar HTML (faça um Backup Template) e marque a opção expandir modelos de widgets. Procure por data:post.body e cole o código logo abaixo dela, clique para salvar e pronto.

Agora as imagens aparecerão no final do seu blog da mesma forma que apareciam no gadget anteriormente e se você quiser editar o gadget para alterar o tamanho ou espaço entre as imagens você deve editar diretamente o gadget e não precisa mais voltar na pagina editar HTML.

Aqui você pode ver uma demonstração do código que falamos, se você copiar o link desta pagina e colar em outra janela do seu navegador verá que serão outras imagens e links mostrados logo abaixo:


Fizemos esse tutorial para responder um comentário que recebemos pedindo para modificar o código para mostrar miniatura dos Posts Recentes. Então queremos agradecer o comentário que serviu como uma sugestão para esse novo tutorial sobre posts aleatórios no blog. Esperamos que gostem e isso seja útil para muitos blogueiros.

18 comentários :

  1. no meu blog, coloquei como postagens relacionadas, mais só ta aparecendo no primeiro post...pq isso?

    ResponderExcluir
  2. Fabiano e porque não fica o título da postagem embaixo das imagens? acho que ficaria melhor assim.

    ResponderExcluir
  3. PAGONEJAesse código só aparece uma vez então se deixar na pagina inicial não vai aparecer embaixo de cada post.


    Rosiel T.S. vou tentar fazer essa alteração que falou.

    obrigado pela sugestão

    ResponderExcluir
  4. na pagina inicial não vai aparecer embaixo de cada post.
    obg

    ResponderExcluir
  5. Esse codigo dar para usar no wordpress ?

    ResponderExcluir
  6. esse código usa como base o feed e o sistema de imagens do blogger.

    não testei no wordpress, mas acredito que não funcione.

    ResponderExcluir
  7. Olá...é possível que os posts apareçam em coluna ao invés de linha? o que deveria ser modificado no código?
    obrigado.

    ResponderExcluir
  8. Raphael no final do código tem a linha:
    var imgFloat = 'left';

    apague esse left e deixe assim:

    var imgFloat = '';

    ResponderExcluir
  9. Funcionou! =p
    Muito obrigado Fabiano!

    ResponderExcluir
  10. adorei.....
    muito bom


    http://the-vampirediariesbr.blogspot.com.br

    ResponderExcluir
  11. Esse blog/site é muito bom!Me ajudou muito,obrigada! :)

    ResponderExcluir
  12. só ta aparecendo 5 imagens como eu coloco mais

    ResponderExcluir
  13. o numero 5 aparece duas vezes no código você trocou os dois?

    ResponderExcluir
  14. Olá, eu testei em meu blog e ele não funcionou. Tenho um domínio próprio, você acha que isso interfere?
    malavazi.emerson@gmail.com

    http://www.quemevocenanoite.com/

    ResponderExcluir
  15. Emerson deve funcionar normalmente.

    eu uso domínio próprio e deu certo em meus testes.

    ResponderExcluir
  16. eu consegui tipo não modifiquei ainda com o link do meu blog porque não entendi mt bem essa parte como eu faço ? eu tenho que apagar

    http://www.dicasparablogs.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails

    eu tenho que apagar isso e colocar o link do meu blog, ou de algum post?queria pedir duas coisas ensina como colocar comentários do facebook no blog e enquete na postagem do blog? ja procurei por tudo mas os links que eu entro nao funcionam mais pra fazer a enquete dentro do post

    ResponderExcluir
    Respostas
    1. neste trecho que citou apague http://www.dicasparablogs.com.br e coloque o endereço do seu blog

      o resto continua tudo igual (inclusive as / e sinais)

      Excluir