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 == "item"'>
<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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
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.
