Dividir post em 2

Bom dia ,venho com mais uma partilha. Como pode visualizár na imagem acima vamos dividir post em dois.
É bem simples depois só têm de configurar conforme largura do seu template.
Vamos só usar e aplicár 1 código,como eu usava no template antes de este.

Antes de tudo faça 1 cópia do seu template...

Entre em seu modelo e html depois procure este trecho``

]]></b:skin>

Ok agora abaixo dele coloque meu código``

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post {
float: left;
background:#FCFCFC url(http://i.imgur.com/xJ0uNYb.png?1) repeat-x center bottom;-moz-box-shadow:0 0 48px #EAE9E1 ;-webkit-box-shadow:0 0 48px #EAE9E1 ;box-shadow:0 0 48px #EAE9E1 ;border:1px solid #FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-shadow:1px 1px 1px rgba(0,0,0,0.1);
width: 280px;
height: 345px;
padding: 15px 15px 15px 15px;
margin-right: 5px;
margin-bottom: 15px;
line-height:1.6em;
color:#454545;
overflow: hidden;
}
</style>
</b:if>

Pronto feito isto visualize como está ,pois terá fazer algumas alterações concerteza::

Vamos entender o código detalhes abaixo...

• width: 280px; Altura post
• height: 345px; Largura post
• background:#FCFCFC Côr fundo post
• url(http://i.imgur.com/xJ0uNYb.png?1) repeat-x center bottom; imagem de rodape(footer)
• border:1px solid #FFF; Borda area post e côr
• box-shadow:-moz-box-shadow:-webkit-box-shadow:#EAE9E1 Côr e sombra post/box
• text-shadow:1px 1px 1px #000; Sombra e côr texto
• margin-right: 5px; Margem direita
• margin-bottom: 15px; Margem rodape

É isso ai foi este simples tutorial que trouxe agora ,alguma questão deixe recado...

Dividir post em 2

► 0

► dicas vários

► Cartita