Gadget de Artigos Relacionados com imagens para Blogger
Uma das coisas mais importantes para manter o interesse de seus leitores em seu conteúdo e oferecer o que eles estão buscando, dar visibilidade aos artigos, de preferência aqueles que têm a ver com o que estão lendo naquele momento. Inter-relacionar os artigos de um determinado tema ou assunto é a melhor maneira de fazer isso e descobri um ótimo gadget – elemento de página para blogs do Blogger – que pode ser adicionado ao final de cada artigo e que usa imagens e textos interligados.
SIGA o @frenetizados1 agora e mantenha-se mais atualizado!
Quer divulgar seu Blog? Saiba como, AQUI!
Quer divulgar seu Blog? Saiba como, AQUI!
Estou usando esse novo recurso aqui no [ Ferramentas Blog ], como pode ser visto na imagem também, no roda-pé de meus artigos e é exatamente isso que vou ensinar a fazer aqui neste tutorial.
Já ensinamos um outro modelo, que você pode avaliar para escolher qual ficará melhor aplicado em seu blog:
- LinkWithin – Artigos Relacionados no Roda-pé com Imagens
Mas esse novo modelo é melhor integrado ao Blogger, funciona mais leve e é bem personalizável, o que te dá mais controle. Ele usa os marcadores de seus artigos para determinar a relação entre os textos e exibir opções de leitura complementar mais compatíveis.
Este gadget funciona em qualquer template e é bem simples de implantar. Será preciso adicionar algumas linhas de código no código-fonte e, por isso mesmo, lembramos da importância de fazer um backup de seu blog antes de prosseguir, bem como use um blog de testes para visualizar o resultado e verificar se funcionará bem em seu modelo de layout.
Adicionando o “Artigos Relacionados”.
1. Vá ao painel do Blogger e abra o menu “Modelo” e clique no botão “Editar HTML” que fica abaixo da miniatura do seu template, quando ver o código fonte do blog, marque a opção “Expandir modelos de widgets”, para poder visualizar todo o código-fonte de seu template.
2. No código fonte 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 == "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 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 conseguir encontrar, procure por algo semelhante ou:
<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, modificando apenas o que for indicado (siga as orientações):
<!--Codigo Artigos Relacionados Inicio-->
<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>
<!--Codigo Artigos Relacionados Final-->Indicado de vermelho está o número “5″ que é a quantidade de elementos que aparecerá. Aqui no meu blog cabem até 7 elementos, então veja qual a melhor quantidade para o seu blog. Já em verde está o título que aparecerá para dar destaque à esta parte de seu blog.
Então salve o modelo e veja o resultado em seu blog.
Lembrando que só funcionará se você estiver usando Marcadores em seu blog. Para aprender a adicionar Marcadores aos artigos e como usar esta funcionalidade, veja os artigos abaixo:
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 comentários:
Postar um comentário