quarta-feira, 11 de setembro de 2019

Postagens em destaque [001]


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>

Crédito: designnmania

Nenhum comentário:

Postar um comentário

Popular Posts