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+" »";
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.
no meu blog, coloquei como postagens relacionadas, mais só ta aparecendo no primeiro post...pq isso?
ResponderExcluirFabiano e porque não fica o título da postagem embaixo das imagens? acho que ficaria melhor assim.
ResponderExcluirPAGONEJAesse código só aparece uma vez então se deixar na pagina inicial não vai aparecer embaixo de cada post.
ResponderExcluirRosiel T.S. vou tentar fazer essa alteração que falou.
obrigado pela sugestão
entendi...que pena ...vlw
ResponderExcluirna pagina inicial não vai aparecer embaixo de cada post.
ResponderExcluirobg
Esse codigo dar para usar no wordpress ?
ResponderExcluiresse código usa como base o feed e o sistema de imagens do blogger.
ResponderExcluirnão testei no wordpress, mas acredito que não funcione.
Olá...é possível que os posts apareçam em coluna ao invés de linha? o que deveria ser modificado no código?
ResponderExcluirobrigado.
Raphael no final do código tem a linha:
ResponderExcluirvar imgFloat = 'left';
apague esse left e deixe assim:
var imgFloat = '';
Funcionou! =p
ResponderExcluirMuito obrigado Fabiano!
adorei.....
ResponderExcluirmuito bom
http://the-vampirediariesbr.blogspot.com.br
Esse blog/site é muito bom!Me ajudou muito,obrigada! :)
ResponderExcluirsó ta aparecendo 5 imagens como eu coloco mais
ResponderExcluiro numero 5 aparece duas vezes no código você trocou os dois?
ResponderExcluirOlá, eu testei em meu blog e ele não funcionou. Tenho um domínio próprio, você acha que isso interfere?
ResponderExcluirmalavazi.emerson@gmail.com
http://www.quemevocenanoite.com/
Emerson deve funcionar normalmente.
ResponderExcluireu uso domínio próprio e deu certo em meus testes.
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
ResponderExcluirhttp://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
neste trecho que citou apague http://www.dicasparablogs.com.br e coloque o endereço do seu blog
Excluiro resto continua tudo igual (inclusive as / e sinais)