26/07/2015

Personalizando área da Postagem e área da Sidebar no Blogger!



Olá pessoal o que estão achando do novo layout do Design Mania? Bom eu gostei bastante desta nova cara. Mudando de assunto me perguntaram sobre a área da postagem, e por isso resolvi fazer um tutorial explicando melhor sobre como personalizar as a área das postagens e a sidebar.

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:

[code] .widget .zippy {   color: $(widget.alternate.text.color);   text-shadow: 2px 2px 1px rgba(0, 0, 0, .1); } .widget .popular-posts ul {   list-style: none; }[/code]

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:

[code].main-inner {   padding-top: $(main.padding.top);   padding-bottom: $(main.padding.bottom); } .main-inner .column-center-inner {   padding: 0 $(main.padding); } .main-inner .column-center-inner .section {   margin: 0 $(main.section.margin); }[/code]

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:

[code]h3.post-title { 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 */ }[/code]

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!◥

4 comentários:

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER