3 de ago. de 2011

Artigos relacionados com miniatura de imagens



O site LinkWithin já havia oferecido um serviço como este mas como blogueiro é gente curiosa e inquieta, já houve quem o aperfeiçoasse. Blogger Plugins agora nos ensina como colocar direto no blog os tais posts relacionaods com miniatura de imagem. Serve para o blog antigo e para o novo, implementado em junho de 2010. Vamos então aprender ?


Vá até o HTML de seu blog e procure pelo seguinte código:

</head>

Acima dele cole este código abaixo
*se quiser que os artigos apareçam na primeira página, apague o código na cor rosa

<!--Posts Relacionados com Miniaturas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iQ_v_AD6G1DnVv3BlFQXubABLYvXdXXJ0fpnaeCL9MEVIDHleNmj5IynLHZ7Me289_9cFEyZGMWiUWPYTRxI8nbW7Sy1z8l3xrQfGzbwy0YlR3P2d80KWdvz-Fn0kdZ2SKHCh_i1M5o/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#CCCCCC&quot;;
var relatedpoststitle=&quot;Posts Relacinados&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;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[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iQ_v_AD6G1DnVv3BlFQXubABLYvXdXXJ0fpnaeCL9MEVIDHleNmj5IynLHZ7Me289_9cFEyZGMWiUWPYTRxI8nbW7Sy1z8l3xrQfGzbwy0YlR3P2d80KWdvz-Fn0kdZ2SKHCh_i1M5o/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="width:86px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:86px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<!-- remove --></b:if>
<!--Fim  Posts Relacionados com Miniaturas-->

Agora clique em "Expandir modelos de widget" e procure pelo código abaixo:

<div class='post-footer-line post-footer-line-1'>

Se não encontrar este acima, tente este outro.

<p class='post-footer-line post-footer-line-1'>


Em ambos os casos, depois do código, aplique todo este trecho abaixo.


<!--Código Posts Relacionados com Miniaturas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!--Código Posts Relacionados com Miniaturas-->


Agora para dar estilo procure por:

 ]]></b:skin>

E antes dele cole o seguinte código:


/*Posts relacionados---------------------------------------------*/
#related-posts {
text-align:center;
text-transform:none;
height:100%;
min-height:100%;
padding:10px 0 15px 0;
margin: 20px 5px 0 5px;
background: #ffffff;
}

#related-posts h2{
font:16px Oswald;
text-shadow:0 1px 1px #ccc;
text-align: center;
color: black;
margin-bottom: 0.35em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
text-shadow:0 1px 1px #ccc;
background: #ffffff;
border: 1px dashed #000;
 padding: 10px; margin: 22px 2px; width: 90px; height: 180px;  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
#related-posts a:hover{color:black; background-color:#ccc;
}

12 comentários:

  1. disculpa a ignorancia mais o que é widget?
    eu tentei fazer e não deu certo

    ResponderExcluir
  2. Widget é tudo que colocamos nas colunas, na parte de "Elementos da página" em nosso blog.

    ResponderExcluir
  3. Elke,

    Estava procurando um rack assim! Deu super certo!
    Obrigado pela dica!

    Eduardo E S Prado

    ResponderExcluir
  4. Elke, olha o que esta dando.
    Eu fiz tudo certo e repeti.

    Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The entity name must immediately follow the '&' in the entity reference.

    ResponderExcluir
  5. Oi garotas, refiz o tuto, agora está tudo certo. Beijos e obrigada !

    ResponderExcluir
  6. oi tudo bem acompanho diariamente gostaria de saber se tem como faser essas postagens aparecer em todoas as postagens da pagina inicial agradeço desde ja

    ResponderExcluir
  7. @Zaraki Scofild tem sim, e já refiz a dica. Retire a parte que está em rosa. Beijos

    ResponderExcluir
  8. óh deus... Tentei este aqui também no meu blogger, coloquei certinho, apague e mudei o que tinha que ser... E mesmo assim salvei e não aparece nada lá :(
    Por acaso eu tenho que instalar algum outro tipo de posts relacionados para que este funcione ? (Nem to mais pensando direito) =s

    ResponderExcluir
  9. A tempos tento colocar, mais nunca consigo, precisa colocar algum link do proprio blog para funcionar.

    Como vejo o efeito?

    ResponderExcluir
  10. Oi, Eu queria saber como coloca esses botões flutuantes que passa para a próxima pagina, já fas um tempo que eu to querendo colocar isso!! :)

    ResponderExcluir
  11. Ola agradeço ja sua partilha de templates,aulas,tutoriais ,artigos etc,tem muitos faze lo ,mas pokitos que sabem fazem ! uso template de sua autoria,k adoro,,m t aki outra coisa,tem akele gadjet de facebook das pessoas inscrevem acompanham seu facebook e mostra suas imagens fotos cm google + axo entende k falo,( mas kero saber tem codigo gadjed de mostrar fotos imagens sim mas das pessoas visitam entram s blog)sera tem se cosegue criar adorava essa ideia cm site ning em cima aparece alguns acompanhantes do ning,,,cm voce e super em codigos nesta arte decidi perguntar ,se tem cm posso fazer colocar ,tenha dia feliz e continue seu otimo trabalho jinho de agradecimento bye bye

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube