quarta-feira, 6 de abril de 2011

Como colocar artigos relacionados com imagens no blog




Existem duas formas de se colocar artigos relacionados, uma delas é mais fácil e a outra um pouco mais difícil. Vou ensinar as duas formas, a escolha fica a seu critério.

A primeira delas é utilizando-se o site Linkwithin. Para você, que está começando a usar blogs, este widget é recomendável, ele escolhe aleatoriamente os seus posts, fazendo com que os seus posts antigos não fiquem esquecidos. Lembrando que você precisa fazer uso de imagens nos posts para que ele funcione corretamente.

Siga as instruções abaixo:

1)Acesse o site LinkWithin.

2)
Coloque seu e-mail:

3)O endereço do seu blog.

4) Qual plataforma utiliza.

5)
Quantas caixinhas deseja.

6)Se o seu template é escuro marque a opção "My blog has light text on a dark background".

7)Clique em "Get Widget!".

8)Na página seguinte clique em "Install Widget".

9)Acesse sua conta Blogger.

10)Selecione o blog.

Em Design, clique e arraste o gadget para baixo das postagens no blog e Salve.


A segunda forma, um pouco mais difícil, porém mais personalizável:

1. Vá ao painel do Blogger e abra o menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”, para poder visualizar todo o código-fonte de seu template.

2. Procure pela linha “</head>” e, imediatamente ANTES dela, insira o código abaixo sem modificar nada:

<!--Artigos Relacionados Estilo e Script Inicio -->
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo e Script Final-->


3. Agora procure por uma linha semelhante a:

<div class=’post-footer-line post-footer-line-1′>

ou, se não, procure por:

<p class=’post-footer-line post-footer-line-1′>

4. Imediatamente ANTES de uma dessas que você encontrar em seu código, cole os linhas a seguir:

<!--Codigo Artigos Relacionados Inicio-->
<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>
<!--Codigo Artigos Relacionados Final-->


Indicado de vermelho está o número “5″ que é a quantidade de elementos que aparecerá. Veja qual a melhor quantidade para o seu blog. Em amarelo está o título que aparecerá em seu blog. Salve.

Obs: Você deve usar Marcadores em seu blog.


11 comentários:

jhon barbosa disse...

como faço esse tipo de menu no blogger http://imageshack.us/f/101/imagem1y.png/ pra quando passar o mouse em cima ele apareçar aqueles tipos links, ele tem no seu blogger, se puder ensinar ou fazer um tutorial. vlw

Leonardo disse...

Muito bom

Unknown disse...

No meu não deu certo, fiz tudo certo, mas quando vou conferir o resultado, não aparece nada. Minha plataforma é o Blogger. Não entendo! Estou usando o LinkWithin, mas esse não podemos editar. Estou querendo mudar. Quem puder me ajudar eu agradeço. Veja meu blog http://felippetoledo.blogspot.com

http://odeclinardosonhos.blogspot.com disse...

Como faço para a aplicação não aparecer na pagina inicial do blog?

Diego Veloz disse...

ow jow ajuda ae gostei muito do post soh que a parada ae esta aparecedo no começo pô ajuda ae!!!

Matheus Alexandre disse...

ola essa dica me ajudou muito agora sou um novo leitor de seu blog muito obrigado. dê uma olhada no meu site graças a vc consegui colocar o tao demorado artigos relacionados
http://moneydicas.blogspot.com

Kakal disse...

Oi,
Entao, nao achei a segunda parte !!!
Queria ter um mais personalizado.... Como faço?

Boninfa disse...

Oi,estão tentando colocar no meu blog, mais ainda não consegui, eu uso marcadores, e fiz todos os passos que você disse, poderia me ajudar?

Priscila disse...

Oi Ana, se vc usar o jump break não vai aparecer. Sabe?

Abrç.

Priscila disse...

Colou o código antes de <div class=’post-footer-line post-footer-line-1′>?

Paty Gocalita disse...

Adorei no meu blog funcionou direitinhooooo

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...