17 de jul de 2011

Dar estilo as colunas do pé do blog (footer) no novo Blogger

Continuando a costumização do blog, vamos agora dar estilo as colunas que ficam ao pé do blog.

Você já sabe que uso o modelo Simple, para as costumizações que faço,  mas não custa lembrar.



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. 


Agora procure por:  

]]></b:skin>  

 


Acima dele cole este código abaixo

/*Footer widget-------------------------------------------------------------------------*/
#footer-2-1, #footer-2-2,  #footer-2-3 {
margin: 10px 2px;
padding: 3px;
background: #FA6C1E;/*cor de fundo do exterior do widget*/
}

#footer-2-1 h2, #footer-2-2 h2,  #footer-2-3 h2{
text-align: center;
padding: 2px 0;
font-size: 16px;
background: #FEECFE;/*cor de fundo do título*/
}
#footer-2-1 ul li, #footer-2-2 ul li,  #footer-2-3 ul li{
padding:  0;
margin: 0;
list-style-type:none;
text-align: left;
font-size: 12px;
}
#footer-2-1 .widget, #footer-2-2 .widget,  #footer-2-3 .widget{
margin: 16px 3px ;
padding: 2px;
background: #C7DEFD;/*cor de fundo do interior widget*/
moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;

}

#footer-2-1 .widget-content, #footer-2-2 .widget-content, #footer-2-3 .widget-content {
margin: 1px;
padding: 3px 1px;
background: #FEF4CC;/*cor de fundo do conteúdo*/
}


Salve.

Se não quiser a sombra nos widgets, apague o código na cor azul
Código na cor rosa é a distância das listas de link da borda do widget
Código em vermelho são as cores dos widgets


Se preferir algo mais clean como este modelo abaixo:



Copie o código abaixo e cole antes de:

]]></b:skin> 


/*Footer widget-------------------------------------------------------------------------*/
#footer-2-1, #footer-2-2,  #footer-2-3 {
margin: 10px -10px;
padding: 3px;
}
#footer-2-1 ul li, #footer-2-2 ul li,  #footer-2-3 ul li{
padding:  0;
margin: 0;
list-style-type:none;
text-align: left;
font-size: 12px;
}
#footer-2-1 .widget, #footer-2-2 .widget,  #footer-2-3 .widget{
margin: 16px 12px ;
padding: 10px  -12px;
border: 1px solid #ccc;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}

2 comentários:

  1. Gostei muito! Será que tem como criar um tema revista nesses novos modelos? Grata

    ResponderExcluir
  2. Cláudia, tem sim. Tenho templates prontos neste modelo e tenho também a dica de como transforma-lo em estilo revista.

    ResponderExcluir

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