Acessório para Mostrar Posts Relacionados no Blog

Mostre link de outras postagens do seu blog no final de cada texto e isso ajudará a conseguir mais page views (visualizações de pagina). Existem muitas vantagens nisto: as pessoas podem ler outros posts do seu blog e com isso aumenta a chance das pessoas gostarem e você divulgação em redes sociais ou mesmo links para seu blog.

LinkWithin - Mostrar assuntos relacionados no blog
Outbrain - Assuntos relacionados e classificação com estrelas

Além disso, sites de busca (Google, Yahoo, Bing e outros) levam em conta o numero de visualizações para classificar os sites em seus resultados de buscas. A idéia é mais ou menos o seguinte quando mais paginas do seu blog os visitantes olharem é um sinal que seu conteúdo é interessante, ou seja, é um blog ou site de qualidade.

Sobre aparecer nos resultados das buscas do Google, leia também:
Como Evitar Punições do Google e Aparecer nos Resultados das Buscas

Já mostramos um serviço parecido com esse feito pelo Linkwithin, mas hoje vamos falar do Connecting bloggers (http://get.2leep.com). Para utilizar no seu blog é bem simples, coloque o endereço do blog na pagina onde vamos criar o widget de posts relacionados e clique no botão próximo, aguarde até o site recolher as informações.


Escolha um formato para seu gadget de assuntos relacionados e clique em próximo, mas como o próprio site avisa você poderá alterar isso depois.


Agora digite um email e senha e quando clicar em registre-se, já aparecer a pagina onde poderá personalizar o modo que esses assuntos relacionados aparecem no seu blog, escolhendo o numero de linhas e colunas e o tamanho da imagem da miniatura que aparece apenas clicando e arrastando para ajustar o tamanho.

Quando clicar no ícone do blogger verá explicações sobre como adicionar ao seu blog. Mas não se preocupe é bem simples é apenas um código para colocar como um gadget (entre na pagina design > adicionar gadget > HTML/javascript e cole o código).


Depois que finalizamos esse tutorial notamos que esse acessório pode ser utilizado por qualquer site e não somente pelo seu blog, ou seja, você pode criar um código nele e mostrar esse código para se outros blogueiros usarem e assim mostrar links para suas postagens. Apesar de ser um tipo de parceria um pouco mais difícil de conseguir pode ser interessante.

Ganhar Tempo e Conseguir mais Visitas no Blog

Essa é mais uma opção de posts relacionados que achamos valer a pena testar, afinal só fazendo testes poderemos descobrir o que é melhor para nosso site ou blog.

Mostrar assuntos relacionados no blog

Mostrar as postagens relacionadas com uma miniatura da imagem, isso é no final de cada um de seus textos aparece o link de alguns outros textos do seu blog com uma imagem, isso é muito útil para gerar trafego entre suas paginas, pois mantêm as pessoas mais tempo no seu blog e isso faz melhorar sua classificação nos sites de busca. Podendo até gerar mais visitas.

É muito fácil de fazer usando o site LinkWithin você só precisa digitar o seu email, endereço do seu blog, escolher a plataforma (sugerimos escolher a opção Other e não a opção Blogger) assim poderá pegar o código em vez de adicionar diretamente no blog, isso é útil, pois dependendo do seu template se usar a opção blog poderá ter alguns problemas como aparecer um gadget vazio, mas se quiser fazer o teste usando a opção blog pode dar certo. e o numero de links que mostrará(Width:). Caso seu blog tenha um fundo escuro e letras claras marque a opção My blog has light text on a dark background, depois é só clicar em Get Widget e copiar o código para colocar no seu blog.

Agora que já copiamos o código para mostrar os assuntos relacionados no Blogger entre na pagina editar html, clique para expandir o modelo e procure por:

<data:post.body/>

Quando encontrar coloque o código que copiou exatamente abaixo dessa linha, clique para visualizar e se estiver tudo certo é só salvar e já está pronto. Agora seu blog mostra o link de algumas postagens com miniaturas no final de cada um dos textos. Se você achar que esses links ficaram muito juntos com sua postagem ou dos comentários pode colocar <br/> antes e depois do código, isso faz deixar uma linha em branco, pode repetir quantas vezes quiser, ou seja, cada <br/> é uma linha em branco.

Se quiser que esses assuntos relacionados apareçam somente na pagina das postagens então coloque o código do linkwithin dentro deste aqui:

<b:if cond='data:blog.pageType == &quot;item&quot;'> código linkwithin</b:if>

Para fazer esse tutorial instalei LinkWithin no blog Frases Curtas.

Já dissemos algumas vezes que não era possível mudar o teste em inglês You might also like que aparece em alguns blogs, mas encontramos como fazer isso, então fizemos uma nova publicação(05/01/2010) sobre o assunto, veja como personalizar o texto mostrado nas postagens relacionadas.

Fazer Resumo da Postagem com Miniaturas das Imagens

Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript. Isso é muito bom e certamente é bem mais fácil de fazer que as versões anteriores para fazer resumo das postagens:

Postagem expansível com miniatura da imagem
Mostrar resumo da postagem

O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar deste jeito no seu blog: <data:post.body />

Então apague essa linha e coloque isso no lugar:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Se encontrar apague, pois isso fará que o link para ler a postagem completa apareça duas vezes como na imagem abaixo, mas se retirar esse código não terá problemas.


E já está pronto, agora é só visualizar seu blog e verá que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.


Essas imagens foram feitas durante nossos testes em nosso outro blog Sites úteis e interessantes.

Para melhorar o layout podemos adicionar algumas linhas de código CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin> (caso tenha duvidas veja aqui: Onde colocar os códigos no blog):

.thumb img {float: left;margin: 5px;}

A parte float:left é o lado que a imagem ficará caso queira do lado direito então use float: right

E se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro código CSS:
.jump-link {text-align: center;margin:auto}
.jump-link a{font-size:16pt;color:#f00}
.jump-link a:hover{color:#00f}

Veja aqui como formatar texto ou colocar bordas. Veja como ficou depois de feitas essas alterações no layout.

Encontramos e fizemos algumas modificações no tutorial publicado no site Blogger Buster, o nome original é Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!

Imagens Lindas