Vai ficar um pouco extenso mais tudo muito bem explicado. Esse tutorial foi baseado no modelo travel do Blogger, por isso se estiver usando outro modelo pode haver erros.
➲ Antes de fazer qualquer alteração em seu template não se esqueça de fazer um backup, pois se der algo errado, poderá ser recuperado com facilidade. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo
➲ Para copiar os códigos, click em e copie
Primeiro vamos ajustar as larguras do Blogger. Vá em Layout ▸ Designer do Modelo ▸ Layout e coloque no seguinte modelo:
Aplique ao Blog. Você pode adaptar de acordo com o seu desejo.
Na mesma página em Designer do Modelo vá em Ajustar Larguras, e coloque da seguinte maneira:
Aplique ao Blog. Novamente digo, pede ser alterada as larguras, depende de seu gosto e necessidade. Agora sim, vamos começar a personalização da área da postagem e sidebar.
SIDEBAR
1. Procure (Aperte Ctrl+F) por /* Widgets. Quando encontrar abaixo dela estarão os seguintes códigos:
Apague todos e substitua por este seguinte:
[code] /* Widgets
----------------------------------------------- */
.sidebar .widget {
width: 300px;
margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
background: #FFFFFF; /* cor de fundo das caixas */
padding:10px; /* espaço entre o texto e as margens */
text-align: justify; /* alinhamento justificado do texto */
font: Arial; /* tipo de fonte dos gadjets */
font-size: 12px; /* tamanho da font dos gadjets */
color: #000; /* cor da fonte dos gadjets */
}[/code]
O código ja se explica por si só, nele você poderá mudar a cor de fundo aumentar o espaçamento entre Widgets além de aumentar as larguras do mesmo.
2. Agora vamos personalizar o titulo dos widgets. Procure (Aperte Ctrl+F) por /* Headings. Quando encontrar abaixo dela estarão os seguintes códigos:
[code]
div.widget > h2,
div.widget h2.title {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}[/code]
Apague todos e substitua por este:
[code]
.sidebar h2 {
font-family: Verdana; /* tipo de fonte do titulo */
color: #fff; /* cor do título */
background: #000; /* cor de fundo dos títulos */
font-size: 12px; /*tamanho da fonte */
text-align: center; /* alinhamento centralizado do texto */
padding: 10px 10px 10px 10px; /* Não mexa Aqui */
margin: -11px -11px .65em -11px; /* Não mexa Aqui */
}[/code]
Faça as alterações necessárias e Salve o Modelo.
ÁREA DE POSTAGEM
1. Procure (Aperte Ctrl+F) por /* Posts. Quando encontrar abaixo dela deverão ser apagados os seguintes códigos:
No lugar deles coloque este:
[code].post-outer {
background: #fff; /* Cor do fundo da postagem */
padding-top: 4px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */
margin: 5px 3px 25px;
}[/code]
2. Para personalizar o titulo acima de h3.post-title, .comments h4 {, coloque o seguinte código:
Bom, com essas dicas você já pode começar a fazer seu próprio layout pessoal. Tem dúvidas? Comente que as responderei o mais rápido possível!
◣ESTE CÓDIGO FOI TOTALMENTE PRODUZIDO POR DESIGN MANIA.
SE FOR REPOSTAR OU USAR DEIXE CRÉDITOS!◥
Eu eu adorei o blog, Pode seguir o meu?
ResponderExcluirPattyworld1.blogspot.com
:) Já segui, confere lá!
ExcluirCara tu é de mais!
ResponderExcluirParabéns pelo tutorial!
http://www.falagabi.tk/
Obrigado, adorei seu Blog!
ExcluirVolte Sempre :)