quarta-feira, 21 de outubro de 2009

Posts Relacionados com Imagens


Então galera, estava navegando na net e encontrei muitos bloggers que já estão usando os posts relacionados com imagens, e com isso resolvi ir a trás do código, para poder disponibilizar para meus leitores, foi quando encontrei o blogger plugins um ótimo blogger americano com inumeras dicas, e então não pensei duas vezes antes de traduzir a matéria e trazer para vocês.
Ao contrário do antigo código de “posts relacionados” que apareciam apenas os títulos dos posts, esse novo modelo destaca também as imagens que você colocou em cada post, mas deixando de enrolação vamos ao que realmente interessa.

Primeiro passo: salve um modelo do seu template, isso eu aconselho na maioria dos meus posts, quando você for fazer alguma alteração no código do template, como já dito para evitar futuros transtornos, e é muito simples de fazer, basta clicar em "baixar modelo completo" conforme a foto abaixo.






Segundo passo: você vai clicar dentro do código HTML do seu template e aperta “CTRL+F” ou seja, "pesquisar" e procurar o seguinte código “</head>”, agora você vai colar o seguinte código antes do código “</head>”.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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{
color: #000;
}
#related-posts a:hover{
color:#000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/codigosnewtechsound/postrelacionado/postrelacionadothumbs21.js' type='text/javascript'/>
</b:if>

E agora você irá salvar.

Terceiro passo: agora você vai clicar em expandir modelo de widget, e procurar o seguinte código:

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

E por último: agora você irá colar logo abaixo desse código citado acima esse outro código:

<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'/>
<div align='right'><span style='font-size: 70%'>via <a href='http://www.portaldicas.net/2009/10/posts-relacionados-com-imagens.html' target='_blank'>Portaldicas</a></span></div>
</b:if>


E pronto é só salvar, porém, os seus posts que não tiverem imagens, irão aparecer imagens em azul escrito "no imagem", então não estranhe isso é normal.

Outro detalhe importante, na hora que você colocar os posts relacionados as cores das letras e do fundo poderão não ser compatível com as cores do layout do seu blogger, mas esse probleminha é muito fácil de ser resolvido, encontre no código do post relacionado "color: #000;" onde o código que eu destaque em vermelho é o código da cor, para alterá-lo entre nesse "site" e escolha a cor que melhor se adaptar ao seu layout.

Bom galera é isso, se surgi mais alguma dúvida basta entrar em contato pelos comentários.

19 comentários:

Blog disse...

Bom dia, não encontrei o codigo do terceiro passo. Eu expandir modelo de widget mas não tá la.

novidades tecnologicas disse...

não precisa ser necessariamente a linha inteira pesquise no código do seu template, por "footer-line-1" caso você não encontre entre em contato.

Blog disse...

Muito obrigado!! So tem mais uma coisa, so da pra ver os posts relacionados com imagens se eu estiver numa postagem individual, na pagina inicial nao aparece as imgens.

novidades tecnologicas disse...

Isso mesmo, ele funciona da seguinte forma, a cada matéria ele irá apresentar as imagens dos posts relacionados com o que o leitor estiver olhando, porém, é muito simples colocar para aparecer na página principla, mas eu não recomendo porque irá encher sua página principal de imagens e com isso irá ficar meio pesada.
Se mesmo assim você quiser colocar é muito simples.
Primeiramente você terá que olha no código que eu coloquei como último passo:
E na primeira linha do código você pode verificar o seguinte código: <b:if cond='data:blog.pageType == &quot;item&quot;'>
Então apague essa linha.
E na última linha desse mesmo código do último passo vocÊ encontrará </b:if>
apague ele também, e pronto agora é so salvar e testar acessando sua página principal.

Blog disse...

Muito obrigado pelas dicas!!!

εïз Mellody εïз disse...

oi
não encontrei o codigo do terceiro passo "footer-line-1" FIQUEI horas procurando ( RISO),
queria por isso no blog que to facendo
me ajuda.
Obrigada

novidades tecnologicas disse...

Mellody procure apenas por "line-1", ou me envie por email um backp do seu template para que eu possa verificar e posteriormente esta te enviando......
newtechsound@hotmail.com

Suzuki disse...

não aparece nem posts relacionados no meu qq eu fço?

εïз Mellody εïз disse...

ta vo facer isso XD.
Obrigada novamente
Mellody

novidades tecnologicas disse...

suzuki você conseguiu fazer o passo-a-passo, certinho porque todos os que colocaram funcionaram, tente novamente caso não der certo entre em contato novamente....

02 Freaks disse...

também fiz tudo direitinho e não consegui! Não aparece os post relacionados

novidades tecnologicas disse...

Tudo bem "freaks" fica tranquilo, se você conseguiu colocar todos os códigos certinho, no passo-a-passo ele tem um bug mesmo, mas depois irá aparecer, caso contrario entre em contato novamente, veja um blog que esta usando ele http://www.tunados.net

novidades tecnologicas disse...

Outro detalhe freaks que também pode esta ocorrendo, e que pode esta levando a não esta aparecendo posts relacionais, é o fato da postagem que você esta clicando não ter mais nenhum posts da mesma categoria...

Gamemaster disse...

Ótima dica,mas não encntrei o código do 3° passo, tentei tambem procurar apenas pedaços dessa linha, mas não tem nada nem parecido, tem como me ajudar?

newtechsound disse...

Amigo, você procurou apenas por line-1, porque dependendo do template muda o começo do código, porém, esse line-1 sempre tem, caso ainda não encontre em contato...

Gamemaster disse...

Procurei apenas por line-1, também não tem nada, nenhuma parte do código não é nem parcecida com essa linha.

newtechsound disse...

Blz. Gamemaster, so uma pergunta, você esta marcando a opção expandir modelos de widgets antes de pesquisar diretamente no código do template?

Gamemaster disse...

Estou marcando a opção sim, tenho 2 blogs, em 1 consegui fazer tudo, mas no outro...

newtechsound disse...

faz o seguinte me manda um email com o url do seu blog que você não esta conseguindo que estarei verificando... blz..

Postar um comentário

divulque

Blogoteca

Boas matérias

 

NewTechSound

Amazing Counters
Toshiba Satellite Laptops