Tutorial: Como colocar postagens na barra lateral

28.6.13

Heeey gente! Quanto tempo hein? Mas tô aqui de volta para ensinar vocês a personalizarem um gadget que coloca outras postagens na sidebar. O bom dele é que ele é em imagem e como diz o ditado "uma imagem vale mais que mil palavras", os leitores vão clicar e ler outras postagens que não aparecem na página inicial. Vem comigo para eu te ensinar ^ ^

Aqui uma imagem de como ficará:

Não precisa mexer no HTML do blog, nós vamos utilizar só o design de modelo.

Painel do blogger >> Opções >> Layout;
Adicionar um gadget >> HTML/Javascript;
Dentro do Gadget cole o seguinte código:

<br />
<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 + 12);
d = s.substr(b + 12, c - b - 12);
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 = "<span style="color: red;">URL DA FIGURA DE IMAGEM NÃO LOCALIZADA"</span>;
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(12, 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzux1h9dD5xYZOGgU0X4NXaVXJl6hgrsZq4LxFXgkmbg634YBp_gcnzmQ1piMvTCSmzwGqobYG4DO7vdo06E06nJRGXOPY6E4c8BbLV4GxL7V_AFpZgi-1Mx691BN9Sh3TGF0ndAYrsk8/')";
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 = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
hoje = new Date()
var numposts = (<span style="color: BLUE;">6</span> +(2*(hoje.getSeconds())))
document.write("<script src=\"http://www.cereja-black.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results=<span style="color: blue;">6</span>&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails\"><\/script>");
</script><br />

Substitua a parte em "URL DA FIGURA DE IMAGEM NÃO LOCALIZADA" por um URL de imagem que você quer que apareça quando a imagem do post não tiver disponível. E a parte http://www.cereja-black.blogspot.com pela url do seu blog.

Bom gente, espero que tenham gostado desse tutorial. Caso dê algum erro me comunique dizendo que erro deu. Desculpe a falta de posts, prometo postar mais vezes. Não esqueçam de comentar, eu retribuo.

13 Recados

Taina Souza Santos28/6/13
Amei esse tuto, nunca vi ele e amei a ideia quero muito colocar ele no meu lay, mas não entendi onde coloca a url do blog :\ se por favor você poder colocar o a palavra que precisa ser substituída pelo link do blog eu agradeceria ^^ Seguindo aqui!

estrellando.com
ResponderExcluir
Respostas
DÉBORA ALVIM28/6/13
tuto bacana na area, show de bola :)
ResponderExcluir
Respostas
Unknown29/6/13
uma otima ideia, mas prefiro ainda linkwi.... e as postagens recentes que o blog disponibilizar p colocar na barra lateral, mas gostei de sua ideia bem criativa, bjos http://mundinhodavamp.blogspot.com.br/
ResponderExcluir
Respostas
Mariana Ribeiro29/6/13
Adorei seu blog flor!!! Obrigada pela visita... Volte sempre!!
ResponderExcluir
Respostas
Lynn29/6/13
Adorei!
faz mais tutoriais assim
beijinhos
http://lynnkumoruna.blogspot.com.br/
ResponderExcluir
Respostas
Natália29/6/13
Que tutorial legal, adorei. Talvez eu o use no meu blog, futuramente rsrs. Beijos, Light As The Breeze

ResponderExcluir
Respostas
Anônimo29/6/13
Boa tarde, tudo bem? Eu estava passando pelo seu blog e achei ele bem legal. Já estou seguindo! Eu tenho 3 blogs sobre bonecas (Monster High e Ever After High), será que você poderia seguir, por favor? =)

-> http://lala-mh-ecologico.blogspot.com.br/#
-> http://everafterhighbylalacosta.blogspot.com.br/
-> http://amomonsterhighbr.blogspot.com.br/

Beijinhos e desculpa incomodar...
ResponderExcluir
Respostas
DÉBORA ALVIM29/6/13
gessica acho que tu fez merda, não funciona..
o o feed tá o link do seu blog..
ResponderExcluir
Respostas
Unknown4/7/13
muito obrigada...gostei da dica....só gostaria de saber se vc me indica um bom site para baixar programas para que eu faça meus templates, pois todos que já tentei baixar estavam com virús....
ResponderExcluir
Respostas
Anônimo27/4/14
não consegui usar, já troquei o link mas não aparece nada :(
ResponderExcluir
Respostas

Adicionar comentário

Deixe aqui sua opinião a respeito do post ou do blog ♥
Você pode comentar através do Facebook também! É rápido, simples e prático!

Pages

Tutorial: Como colocar postagens na barra lateral

13 Recados

A Blogueira

MAIS LIDOS:

Seguidores

Acervo de Posts

Labels

Visualizações

Pages

Tutorial: Como colocar postagens na barra lateral

Compartilhe esse post!

Veja Também:

13 Recados

A Blogueira

MAIS LIDOS:

Seguidores

Acervo de Posts

Labels

Visualizações