9 de abr de 2014

Voltamos + Como separar os widgets da sidebar


Ohayou gozaimasu
Voltamos emfim. Não somos mais uma equipe, agora é apenas eu. Esse blog ficou muito tempo desatualizado, até que eu vim dar uma mexida e vi ele, pensei, pensei ... porque não mudar ele e fazer um blog tecnicamente novo? E cá estou eu! 
Hoje a tia Becky vai ensinar vocês à como separar os widgets (ou gadgets, como preferir) da sidebar, é super fácil e você nem precisa ter tanta noção em html. Esse tutorial serve para deixar a sidebar assim como a do blog, cada widget dentro de um quadradinho. Fica um amor, e você pode personalizar do jeito que quiser depois! Vamos lá?

1- Vá no seu HTML blogger-modelo-editar html, procure por /* Widgets e você achará algo mais ou menos assim:
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
2- Antes de fechar a chave, cole:
background: #FFFFFF; 

Esse é o código do fundo, você pode trocar #FFFFFF por outra cor, use essa tabela para ver códigos de cores.
3- Se você quiser deixar a borda dos gadgets arredondada, o que é muito cutie e diferente, cole isso abaixo:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

4- Salve o seu modelo e visualize. Espera, você notou uma coisa atrás dos widgets? Ah, isso é só sua sidebar original, vamos tirá-la! Primeiro vá até o Designer de Modelo blogger-modelo-personalizar, clique em Avançado e depois em Plano de fundo das guias, agora deixe tudo transparente, assim:



Prontinho! Salve e sua sidebar dividida já está lá! Se quiser adicionar bordas, estilos de texto e etc, é só colocar abaixo do código do bakground, é puro CSS! Sayonara >.<

Nenhum comentário:

Postar um comentário

✗ Lemos e retribuímos todos os comentários.
✗ Os comentários são moderados, então pode demorar um pouco para ele ser aprovado.
✗ Não comente apenas para divulgar seu blog, se você deixar o link no final do comentário, estarei disposta a visitá-lo e quem sabe seguir.