13 novembro, 2016

Postagem Relacionadas no Post do Blog

Olá, tudo bem? Hoje trouxe um tutorial bem legal para você, vou mostrar como colocar postagens relacionada no seu blog, fica bem útil para o blog, pois ele mostrará outras postagens relacionadas e os leitores poderão se interessar em lê outras postagens...Vamos começar:
  • 1 -Painel Principal
  • 2 -Modelo
  • 3 -Editar HTML
  • 4-Agora clique em qualquer lugar dentro da caixa de HTML e clique em Ctrl + F e procure por:
</head>
  • 5-E cole o seguinte código acima de </head>:
<!--Postagens relacionadas-começo-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Postagens relacionadas-fim-->
  • 6-Agora você vai procurar no Ctrl + F o seguinte código: 
<div class='post-footer-line post-footer-line-1'>
  • 5-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-->
  • 6-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.
  • 7-Agora vamos personalizar todo esse código! Vá em:  ]]></b:skin>  abaixo dele coloque o código abaixo:
<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>
  • 8-Espero que vocês tenham gostado! 
  • 9-Inspiração: Blog, Blog

Nenhum comentário

Postar um comentário

Moda e Poesias - Design Adorável Design | Design by Szablony