Assine o Feed
Bom hoje estarei ensinando a vocês a como colocar coluna no template pelo HTML do blog!
Obs: Este é um tutorial aplicado no theme minima do blogger.
E para começar a modificar seu template faça um backup para evitar problemas.
1° Vá ao painel do blogger: Design>Editar HTML e procure pelo seguinte trecho:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
2° O código que será mostrado abaixo cole ele logo acima de
<div id='main-wrapper'>
<center><div id='coluna'>
<table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" background="link da imagem do titulo aqui"> </th>
</tr>
<tr>
<td background="link da imagem onde vai ficas as widets"><b:section class='coluna' id='coluna' preferred='yes'></b:section> </td>
</tr>
<tr>
<td background="link da imagem do footer"> </td>
</tr></table>
</div></center>
<table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" background="link da imagem do titulo aqui"> </th>
</tr>
<tr>
<td background="link da imagem onde vai ficas as widets"><b:section class='coluna' id='coluna' preferred='yes'></b:section> </td>
</tr>
<tr>
<td background="link da imagem do footer"> </td>
</tr></table>
</div></center>
O que está em azul é onde você irá modificar a largura total das imagens!
3° Adicionando CSS procure por ]]></b:skin>. e com o código seguinte cole acima dele!
#coluna {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
Para mudar a Posição da Coluna Troque Left por Right, Pra altera a largura da Coluna Altere os numero destacado em Azul. Lembrando que pra Caber as Colunas Precisa Almentar o Valor
de width::
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont; }
de width::
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont; }
Bom é isso ae fiquem atentos ao próximo tutorial da Lider Designer
Assinar:
Postar comentários (Atom)
1 comentários:
como q vai copiar
Postar um comentário