google-site-verification: googlefa726c33bfe55042.html Posts relacionados com imagem que realmente funciona - Info Silent Install
Follow InfoSilent on Twitter Follow AlemaoAddons on facebook

Posts relacionados com imagem que realmente funciona

Você já tentou colocar no seu blog artigos relacionados com imagem?Não deu certo?Resolveu optar pelo  LinkWithin?Ocorre que o LinkWithin embora aparecendo as postagens relacionadas com imagem não faz o que deveria,eu explico:se você observar ele relaciona postagens que não tem nada a ver ,não possui relação nenhuma com o artigo que está sendo visto.Isto não é bom,pois o visitante pode se interessar muito mais por algo que tenha a ver com  com o que está lendo.Pesquisando e testando verifiquei que muitos scripts não funcionam e que muitas postagens são cópias mal feitas.Encontrei então no                 
http://www.dicasblogger.com.br/ da Juliana a maneira correta e o código correto que funciona perfeito no novo blogger e que diferente do  LinkWithin mostra posts relacionados que tem a ver com o conteúdo visto.
vamos ao código;

Usando um script, podemos transformar links em imagens, o que pode chamar ainda mais a atenção dos nossos leitores. A única ressalva é que quanto mais imagens, mais demora para a página carregar e foi por isso que não estou usando o novo hack aqui no blog e nem as imagens nos comentários.
Recomendo que quem já tinha o hack antigo instalado, que apague todo o código anterior para não dar conflito com o atual. (hack posts relacionados)
Entre no html do template, clique em expandir modelos de widgets e procure (Crtl+F do teclado)por </head> Colem ANTES o seguinte código:
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
height: 150px;
color: #000;
border: 1px solid #ccc;
background: #efefef;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
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 thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png%27;
}
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() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(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="width: 114px;text-decoration:none;padding:5px;float:left;text-align: left;margin: 0px;');
if(i!=0) document.write('"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:92px;height:92px;border: 0px;margin: 3px auto 0px;padding: 1px;" src="'+thumburl[r]+'"/><br/><div style="width:100px;padding-left:4px;text-align:center;height:auto;border: 0pt none ; margin: 3px 0pt 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: 1.1em; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
Para que as imagens apareçam logo embaixo do post, procurem por:
<p class='post-footer-line post-footer-line-1'>
ou por:
<div class='post-footer-line post-footer-line-1'>
Vai depender do template
E colem este outro código logo APÓS:
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artigos relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
Se você quiser que as imagens apareçam depois do rodapé do post, cole o código acima DEPOIS da seguinte linha:
<div class='post-footer-line post-footer-line-3'>
Para mudar o número de artigos exibidos, altere a parte verde do código:
var maxresults=5;
Para mostrar os artigos relacionados na página inicial, apague as partes em vermelho

Meu blog de drivers ficou assim;
EasyCapture1
Em #related-posts você pode mudar a cor, a posição e o tamanho da fonte:
font-size: 15px; (tamanho)
font-weight: bold;(italic ou normal)
color: #000; (cor)
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; (tipo)
RSS/Feed: Receba automaticamente todas os artigos deste blog!
Clique aqui para assinar nosso feed. O serviço é totalmente gratuito

Nenhum comentário:

Postar um comentário

adicione seu comentário