postagem%20relacionada-related%20post-leia%20tamb%C3%A9m
Uma coisa muito útil que pode ter no seu blog é a famosa "postagem relacionada", muitas pessoas chamam como "Leia também", "Related post" ou "Post relacionado", enfim, pode se dar vários nomes para esse negocinho maravilhoso 

O que é e para que serve a postagem relacionada?

As vezes você entra em um blog e começa a ler um post e abaixo dele aparece agumas opções de postagem relacionada, certo? Pois então, isso que irei te ensinar a fazer.

Esse script serve para manter o leitor  entretido no seu blog, pois quando ele procurar sobre o assunto que deseja irá aparecer outros posts que você escreveu no "postagem relacionadas" sobre esse mesmo assunto e isso fará com que o leitor fique curioso em ler o próximo post e assim ele fica mais tempo no seu blog. Deu pra entender?

TUTORIAL: Como colocar no meu blog?

Para colocar a postagem relacionada no seu blog é muito simples, basta você ir no painel principal do seu blog, clicar em Modelo e em seguida em Editar HTML.

Agora clique em qualquer lugar dentro da caixa de HTML e clique em Ctrl + F e procure por:
</head>
E cole o seguinte código acima de </head>:


Sua Hospedagem Compartilhada - A Melhor Hospedagem Web pelo melhor preço do Brasil

<!--Postagens relacionadas-começo-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Postagens relacionadas-fim-->
  
Agora você vai procurar no Ctrl + F o seguinte código:

<div class='post-footer-line post-footer-line-3'/> 
Lembrando que você pode não encontrar o código acima, caso não encontre procure por:

:<div class='post-footer-line post-footer-line-3'> 
Neste caso voce terá que colocar o código depois da que fecha esse código. (Caso não entenda essa parte pergunte nos comentários que te ajudarei )

São diversas extensões de Domínios ao seu gosto e preferencia, com Add-ons GRÁTIS em todos os nomes de domínio
E abaixo dele você coloca este código:
 
<!--Código Postagens relacionadas Início-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;<b>Veja também:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!--Código Postagens relacionadas Final-->

1 GB Espaço em Disco, 1 Domínio, 1 endereço de e-mail, No Ads, 5 GB Tráfego E Suporte ao cliente...
O número 4 em "var maxresults=4;" no código acima pode ser subtituído pelo tanto de miniaturas que você quer que apareça no final do seu post. 

E o "Veja também" também pode ser substituído por outra frase, se você preferir. Agora vamos personalizar todo esse código! 

Antes do ]]></b:skin>  coloque o código abaixo (remova a parte style):

 
<style type='text/css'>
#related-posts{
float:left;
width:auto;
 margin-left: 15px}

#related-posts h2{
background: none
}
#related-posts .related_img {
    margin: 5px;
    width: 155px;
    height: 155px;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -webkit-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
    -moz-border-radius: 5px; /*tirar essa linha se quiser quadrado*/
    border-radius: 360px; /*tirar essa linha se quiser quadrado*/
}
#related-title {
    color: #000; /*cor da font*/
    text-align: center; /*alinhamento do texto*/
    padding: 70px 10px; /*posição do texto junto com o background*/
    font-size: 12px; /*tamanho da font*/
    width: 150px; /*largura do background*/
    height: 40px; /*altura do background*/
    font-weight: bold; /*espessura da font*/
    position: absolute;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.76); /*cor do fundo*/
    border-radius: 360px; /*tirar essa linha se quiser quadrado*/
    margin-top: -180px;
    transition-duration: .4s;
    opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{
opacity:.7;
filter:alpha(opacity=70);
-moz-opacity:.7;
-khtml-opacity:.7
}
</style>

SÃO MODELOS PRONTOS EM SISTEMA JOOMLA E WORDPRESS OU A SUA ESCOLHA

SÃO MODELOS DE FACIL GERENCIAMENTO DE TVWEB E RADIOWEB

SÃO DIVERSOS MODELOS PARA SEU BLOSPOT A SEU GOSTO

por  MBS Multimídia e Tecnologia