27/06/2015

Postagens em Destaque no Blogger!



Me pediram na chat-box a alguns dias, sobre como eu coloco miniaturas das postagens nos layouts que eu faço (veja um exemplo aqui), então por isso, desenvolvi um código bem simples, para você destacar algumas postagens em seu blog. Vamos lá... [PREVIEW]

1. Vá para Modelo - Editar HTML. Com a página aberta, utilizando as tecla Ctrl e F procure por ]]></b:skin>. Quando encontrar logo acima da tag coloque o seguinte código:

/* Posts destaque - http://designnmania.blogspot.com.br/
----------------------------------------------- */
.postsrecentes{
align: center;
margin-left:0px;
width:1000px;
}
.postsrecentes a, .postsrecentes a img {
display: inline-block;
margin-right:4px
}
.postsrecentes a {
width:315px; 
height:220px; 
position: relative;
padding: 0px;
padding-bottom:0px;
padding-leftt:5px;
background:transparent;
margin-top:10px;
}
.postsrecentes a span {
vertical-align: bottom;
position: absolute;
width:315px; 
height:70px;
bottom: 0px;
left: 0px;
padding-top: 5px;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size:18px;
opacity: 0;filter: alpha(opacity=0);
background: #669195; 
font-style: bold;
transition-property: all;
transition-duration: 1s;
color:#fff;
}
.postsrecentes a:hover span{
opacity: 0.96;
filter: alpha(opacity=96);
height:60px; 
transition-property: all;
transition-duration: 1s;
color:#fff;
}
.postsrecentes a span:hover{
color:#fff;
}
.postsrecentes img{
opacity:0.9
}
.postsrecentes img:hover{
opacity:1.0
}
.estilo1 {
text-transform: uppercase;
font: 25px 'Source Sans Pro';
color:#669195;
border-bottom: 1px solid #669195; /* Cor da Borda */
}

As partes na cor vermelho e o tamanho total dos destaques; na cor amarelo são os tamanhos das imagens nos destaques; as partes na cor azul são as fontes e seus tamanhos; e por as na cor verde são as cores. Salve

2. Para adiciona-lo definitivamente a seu layout, vá para Layout - Adicionar um Gadget - HTML/JavaScript e coloque o seguinte código:

<h1 class='estilo1'>Postagens em Destaque</h1>
<div class='postsrecentes'>

<a href='LINK-DA-POSTAGEM'><img src='LINK-DA-IMAGEM' style='width:315px; height:220px'/>
<span>TEXTO-DOS-DESTAQUES</span></a>

<a href='LINK-DA-POSTAGEM'><img src='LINK-DA-IMAGEM' style='width:315px; height:220px'/>
<span>TEXTO-DOS-DESTAQUES</span></a>

<a href='LINK-DA-POSTAGEM'><img src='LINK-DA-IMAGEM' style='width:315px; height:220px'/>
<span>TEXTO-DOS-DESTAQUES</span>
</a>
</div>

Bom acho que o código já se explica por si mesmo. As partes na cor vermelho, são a largura da imagem, que devem estar de acordo com as do código; as na cor laranja, são as da altura da imagem, que novamente devem estar de acordo com as do código Já a parte grifada em roxo, e a da palavra Postagens em Destaque que pode ser alterada. Salve

Pronto, os destaques já estão em seu blog. Lembrando que eles não se atualizam sozinhos, precisam ser atualizados constantemente. Compartilhe!


◣ESTE CÓDIGO FOI TOTALMENTE PRODUZIDO POR DESIGN MANIA.
SE FOR REPOSTAR OU USAR DEIXE CRÉDITOS!◥

2 comentários:

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER