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!◥
João não consegui, me ajuda por favor...
ResponderExcluiro que aconteceu?
Excluir