Postagens relacionadas no rodapé dos posts no blogger 1

João Santos | 12:28 | , , ,

Um dos widgets mais interessantes que eu até utiliso aqui no Diretórioup é a Lista de artigos relacionados que fica no final de cada postagens, de acordo com o os seus marcadores, Já dei um dica que muitos blogueiros usam que é o LinkWithin é simples e mais vem com o link do site abaixo das postagens relacionadas. Portanto, esse Widget que vou postar com a idéia brilhante do Site Mundo Blogger, não vem com nenhuma propaganda somente seus posts.
 Ok vamos a prática.
Primeiramente logado no blogger ~> Design ~> Editar HTML, não precisa "Expandir os modelos de widgets" procure pela tag </head> e ACIMA dela poste o código abaixo:


<!--Artigos Relacionados com Imagens 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, “Times New Roman”, 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 com Imagens Estilo e Script Final-->


Procure por uma das partes abaixo no seu template usando CONTROL+F


div class='post-footer-line post-footer-line-2 class='post-footer-line post-footer-line-2 class='post-footer-line post-footer-line-3

Achando a parte do código que citei acima, basta colar todo o codigo abaixo, após a linha encontrada acima.


<!--Inicio do Codigo Artigos Relacionados-->
<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>
<!--Fim do Código Artigos Relacionados-->


Salve as alterações!

O código acima está projetado para que os artigos relacionados apareçam apenas nas páginas internas. Caso queira que apareça também na página inicial, basta apagar a 1º e a última linha do código(destacado em vermelho).

Você pode editar os estilos aplicados no código ,e para isso você precisará alterar alguns elementos no primeiro código que você colou logo acima da tag
Se não se lembra qual é, procure pela linha:


#related-posts -> se refere ao título.
font-size: 1.6em; -> tamanho da fonte
color: black; -> cor da fonte

Se quiser acrescentar um fundo (background) no titulo, acrescente a linha:
background: #fff; --> (Edite a cor conforme seu gosto)
Se quiser acrescentar uma imagem como background ao Titulo, acrescente:
background: #fff url('endereço da sua imagem') repeat;

#related-posts a{
color:black; -> se refere a cor do texto.
#related-posts a:hover{
color:black; -> se refere a cor do texto quando passa o mouse em cima.

#related-posts a:hover {
background-color:#d4eaf2; -> cor do plano de fundo quando passa o mouse em cima.

Lembrando que não é possível a visualização das alterações nos estilos , elas só ficam visíveis apos serem salvas.

Gostou do artigo? Assine via e-mail e receba atualizações do blog imediatas em sua caixa de entrada ou se preferir assine via RSS/Feed. Vira fã no Facebook.

1 Responses So Far:

Paulo Cesar PC- BLOG DE TUDO UM POUCO, MINHA OPINIÃO disse...

Muito bom vim aqui e poder usufluir de tudo que esse blog nos passa a nivel de conhecimento. um grande abraço pra você.

- Comentário Moderados -

Não aceitamos por aqui:

- comentário nada a ver com o artigo.

- Links de propaganda (Spam).

- Link de divulgação de seu Blog/Site.

- Pedido de parcerias.

- Com palavrões e onfensas.

Enfim, é simples coisas desnecessárias serão removida, qualquer dúvida temos uma página de Contato.
Agradeço pela compreensão.

 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS