24 de abr de 2012

Combo 2: diminuir espaço entre sidebar e posts, colocar cor de fundo e deixar as imagens dos posts em mesmo tamanho




Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011



A primeira coisa a fazer é diminuir o espaço entre as postagens e a sidebar. Para isso, procure por:


 <Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="15px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="15px" value="15px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="30px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="30px"/>

E troque por:


   <Variable name="main.section.margin" description="Main Section Margin" type="length" default="5px" value="5px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="5px" value="5px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="3px" value="3px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="3px" value="3px"/>


Salve

Agora vamos retirar as bordas.




Procure por:

border-right: 1px solid $(body.rule.color);

E troque por:


border-right: 0px solid $(body.rule.color);

Agora troque:

border-left: 1px solid $(body.rule.color);

por:

border-left: 0px solid $(body.rule.color);


Procure por:

border-$startSide: 1px solid $(body.rule.color);

Troque por:

border-$startSide: 0px solid $(body.rule.color);


Agora que tiramos as bordas de cada elemento da sidebar, vamos dar estilo, dininuindo os espaços entre cada widget.



SE VOCÊ TEM 3 COLUNAS NO FOOTER




Acima de:

/* Headings


Cole o código abaixo

/*Sidebar---------------------------------------------------*/
#sidebar-left-1,  #sidebar-left-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-1,  #sidebar-right-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-2-1, #sidebar-left-2-1 {
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#sidebar-left-2-2,  #sidebar-right-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-1{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-1{
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-2 {
margin: 5px 2px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

#footer-2-3 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}


SE VOCÊ TEM 2 COLUNAS NO FOOTER O CÓDIGO ENTÃO É ESTE



Acima de:

/* Headings



/*Sidebar---------------------------------------------------*/
#sidebar-left-1,  #sidebar-left-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-1,  #sidebar-right-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-2-1, #sidebar-left-2-1 {
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#sidebar-left-2-2,  #sidebar-right-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-1, #footer-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-1{
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

#footer-2-3 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

Salve.


Prontinho. Agora vamos dar um espaço entra a postagem e regular o tamanho das imagens.




Procure por:


.main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}

E troque por:


.main-inner .column-center-inner .section {
  margin: 5px 10px 10px 10px;
 background: #eee;
 padding: 10px 10px 10px;
}

.post-body img {
width: 280px;
height: 200px;
}

Um comentário:

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube