Postagens relacionadas para blog- código pronto para usar

Views:
CÓDIGO CSS:
(colar acima de ]]></b:skin>)

/*---Postagens relacionadas by elainegaspareto.com---*/
#related-posts{
background: transparent;
float:left;
width:107%;
margin-left:-0.8%; /*DISTANCIA EM RELAÇÃO A ESQUERDA, ALTERE PARA AJUSTAR*/
max-height:240px;}
#related-posts a{
margin-left:18px;}
#related-posts a:hover{}
#related-posts h2{
padding:4px;
padding-top: -3px;
margin-top:20px;
width:100%;
margin-left:0px;
font-size:20px; /*TAMANHO DA FONTE DO TÍTULO DO WIDGET*/
line-height:19px;
text-align:center;
color:#000000;  /*COR DA FONTE DO TÍTULO DO WIDGET*/
text-transform: none;
font-family: 'source sans pro', sans serif; /*TIPO DA FONTE*/
}
#related-posts .related_img {
padding:0px;
margin-top:20px;
margin-left:2px;
margin-right:-1px;
width:180px; /*LARGURA DA MINIATURA*/
height:150px; /*ALTURA DA MINIATURA*/
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;}
#related-title {
background: #bf9f79; /*COR DE FUNDO DO TÍTULO AO PASSAR O MOUSE*/
position:absolute;
margin-left:2px;
color:#ffffff; /*COR DA FONTE DO TÍTULO*/
text-align:center;
padding:10px;
font-size:12px; /*TAMANHO DA FONTE DO TÍTULO*/
width:160px; /*LARGURA DO ESPAÇO DO TÍTULO*/
font-family: Helvética, Arial; /*TIPO DA FONTE DO TÍTULO*/
font-weight:normal;
margin-top:-102px;
opacity:0;
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;}
#related-posts a:hover #related-title {opacity:1;margin-top:-62px;}
#related-posts a:hover .related_img  {
-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;
opacity:0.4;}


CÓDIGO JAVASCRIPT:
(colar acima de </head>)

<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>



CÓDIGO HTML:
(colar abaixo de <div class='post-footer-line post-footer-line-3'>)

<!-- 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=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
  var relatedpoststitle=&quot; Confira também:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!-- Postagens relacionadas- final-->


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage