Dica: deixe o Photoshop aberto. A gente pode precisar dele!
Troque o ffffff pela cor desejada. Você pode consegui-la no Photoshop, assim:
Em laranja: Aqui é a cor do texto da página. Eu aconselho a deixar o #333333 ou o preto #000000. Mas vai do gosto de cada um.
Em verde: Aqui é o nome da fonte que você vai usar na página. Coloque o nome da sua favorita.
Em roxo: Aqui você troca o tamanho da fonte.
O resto deixem como está.
O segundo item do código nos permite trocar a cor do texto da página.
Em vermelho: Troque a cor do texto. Assim como no caso anterior, aconselho a deixar como está ou trocar por #000000 (preto).
Em laranja: Aqui você troca a fonte dos textos.
Em dourado: Tamanho da fonte.
Agora nós vamos começar a mudar a cor dos links da página, lembrando que esses links são somente os que ficam fora da sidebar e da área de posts.
Em vermelho: Neste item você pode mudar a cor do fundo do link. Aconselho a deixar como está, mas vai do gosto de cada um.
Em laranja: Aqui você pode colocar uma borda abaixo do link. Basta trocar o 0 por um número. Exemplo: 1 px.
Em azul: Você muda a cor do link aqui. Basta trocar o que está após o # pelo código da cor desejada.
Em vermelho: Neste item você pode mudar a cor do fundo do link quando já foi visitado. Aconselho a deixar como está.
Em laranja: Você pode mudar a cor do link (visitado) aqui. Basta trocar o que está após # pelo código da cor desejada.
Em azul: Aqui você configura a borda inferior do link visitado. Aconselho a deixar como está.
Em vermelho: Neste item você pode mudar a cor do fundo do link quando o mouse está em cima dele. Se deixar como está, não vai mudar a cor.
Em laranja: Você pode mudar a cor do link (quando o mouse está em cima dele) aqui. Basta trocar o que está após # pelo código da cor desejada.
Em azul: Aqui você configura a borda inferior do link quando o mouse está em cima dele. Você pode trocar o dotted por solid.
Agora nós vamos colocar o topo que criamos no código. Hospede a sua imagem (indico o Imageshack, mas precisa de cadastro) e copie o link direto. (Exemplo:http://img822.imageshack.us/img822/9202/topojf.jpg)
Em vermelho: Onde está indicando, coloque o link da imagem que você criou. Lembrando que você deve hospedar o arquivo que salvamos em .JPG.
Em laranja: Troque o 1080 pela largura que a sua imagem tem.
Em azul: Troque o 500 pela altura que sua imagem tem.
Não importa a altura da seleção, desde que você selecione a largura inteira, assim como na imagem.
Depois disso, copie (ctrl + c) e abra um novo documento (Archive/Arquivo > New / Novo). Cole neste novo documento (geralmente ele já vem com o tamanho certo da imagem copiada). Salve essa imagem e hospede. Agora vamos para o código:
Em vermelho: Cole o link da sua imagem aqui.
Em laranja: Altere a largura do fundo aqui. Lembrando que ela deve ser a mesma largura da imagem do topo.
Em vermelho: Troque o 275 pelo número que você viu no Photoshop. Caso o texto da sua sidebar ultrapasse ou fique muito pequena, altere o valor.
Em laranja: Se a sua sidebar estiver no lado direito, troque o left por right. Se estiver no esquerdo, deixe como está.
Em dourado: Aqui é o valor da margem interna. Pode deixar assim.
Em azul: O valor da margem esquerda. Caso tenha trocado o left por right, troque aqui também. Vá trocando o número até o conteúdo da sua sidebar ficar posicionada corretamente ao espaço que criamos para ela.
Em roxo: Aqui é o espaço que sua sidebar terá do topo. Altere o número para posicioná-la da melhor maneira. Caso precise, tire o sinal de menos (-).
Em rosa: Margem interna do lado direito.
Em verde: Margem interna do lado esquerdo.
Em vermelho: Cor dos textos na sidebar.
Em laranja: Fonte dos textos na sidebar.
Em azul: Tamanho dos textos na sidebar.
Em vermelho: Cor do link na sidebar.
Em vermelho: Cor do link quando o mouse encostar nele.
Em vermelho: Aqui você troca a imagem de fundo dos títulos do gadgets. Você pode criar uma no Photoshop, fazendo um retângulo ou personalizando com uma textura.
Em laranja: Cor do texto do título da sidebar.
Em azul: Fonte usada no título da sidebar.
Em roxo: Tamanho do título na sidebar.
Em rosa: Se você quiser que o título fique todo em maiúsculo, deixe como está. Se não, apague essa linha.
Em dourado: Pode deixar como está.
Em azul: Margem inferior do título.
Em roxo: Margem esquerda do título.
Em vinho: Margem direita do título.
Em verde: Margem interna superior do título.
Em azul: Alinhamento do texto. Caso queira deixar centralizado, deixe assim. Para colocá-lo na esquerda, troque o center por left. E para posicioná-lo na direita, troque por right.
Em verde: Tamanho do título na sidebar.
9. Post
Vamos arrumar a área de posts agora. Essa parte tem bastante coisa pra configurar, então redobrem a atenção aqui. Beleza?
#main-wrapper {
width:600px;
height: auto;
background-color:transparent;
float: right;
padding-bottom: 10px;
margin-top: -170px;
margin-right: 85px;
color:#333333;
font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
font-size:12px;
}
Em vermelho: Este é o tamanho da sua área de post. Assim como fizemos para descobrir a da sidebar, faça aqui para descobrir a do post. O tamanho que der você coloca aí. Lembrando que você pode alterar caso fique maior ou menor.
Em laranja: Caso seu post esteja ao lado direito da página, deixe como está. Se estiver no esquerdo, troque o right por left.
Em azul: Aqui é a margem interna inferior. Coloque o número que achar melhor.
Em roxo: Neste item você vai configurar a posição superior do post. Vá mexendo nos números até ele ficar certinho na “altura” da página, em cima da área que marcamos para ser a das postagens.
Em rosa: Esta é a margem direita da área dos posts. Se sua área de postagem está à direita, só troque o número. Se estiver na esquerda, altere o número e o right por left.
Em dourado: Aqui você vai modificar a cor dos textos no post. Aconselho a deixar como está ou trocar por #000000 (preto).
Em verde: Este é o item onde você escolhe a fonte do post. Indico Verdana, Arial ou Tahoma que são as mais “comuns”.
Em azul: Aqui você configura o tamanho da fonte. Indico deixar entre 10 e 12, assim não fica tão pequena nem tão grande.
.post {
margin:.5em 0 .5em;
padding-bottom:.5em;
}
Em vermelho: Aqui você vai mudar as margens do post. Indico deixar como está.
Em laranja: Neste item você altera a margem inferior interna do post.
.post p, .post-body {
line-height:1.7em;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
font-size: 12px;
}
Em vermelho: Neste item você muda o espaçamento entre as linhas do post. Pode deixar como está, se quiser.
Em laranja: Trocar a fonte do texto do post.
Em azul: Aqui você troca o alinhamento do post. Você tem quatro opções: justify (justificado), right (à direita), left (à esquerda) e center (centralizado).
Em roxo: Tamanho da fonte no post.
#main-wrapper .post-body a {
color:#7b5342;
text-decoration:none;font-weight: bold;
}
Em vermelho: Cor do link nos posts.
Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.
#main-wrapper .post-body a:visited {
color:#7b5342;
text-decoration:none;
font-weight: bold;
}
Em vermelho: Cor do link no post quando já foi visitado.
Em azul: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.
#main-wrapper .post-body a:hover {
color:#333333;
text-decoration:none;
font-weight: bold;
}
Em vermelho: Cor do link quando o mouse passa por cima.
Em laranja: Se deixar essa opção, o link ficará em negrito. Se quiser tirar, basta apagar essa linha.
#main .post h3 {
color:#c3937e;
font-family:’Cookie’, cursive;
font-size:40px;
margin-top: 50px;
text-align:left;
text-decoration:none;
width:600px;
}
Em vermelho: Cor do título do post quando está na página da postagem e não na principal do blog.
Em laranja: Fonte do título do post quando está na página da postagem e não na principal do blog.
Em azul: Tamanho do título do post quando está na página da postagem e não na principal do blog.
Em roxo: Margem superior do título do post quando está na página da postagem e não na principal do blog.
Em rosa: Alinhamento do título do post quando está na página da postagem e não na principal do blog. Pode ser trocado por right (direita), center (centralizado), justify (justificado) ou deixar como está, left (esquerda).
Em dourado: Tamanho do espaço do título do post quando está na página da postagem e não na principal do blog.
#main .post h3 a, .post h3 a:visited, .post h3 strong {
color:#c3937e;
display:block;
font-family:’Cookie’, cursive;
font-size:40px;
border-bottom: 1px dotted #cecece;
margin-top:50px;
text-align:left;text-decoration:none;
width:600px;}
Aqui nós vamos mudar o estilo do título do post quando está na principal, ou seja, quando está “linkado”. Conselho a deixar os mesmos valores/cores do item anterior para os itens que já estão aqui. Ou seja, se colocou tamanho 40px na fonte de lá, coloque aqui também. Por isso só vou explicar aqueles que não estão no anterior e que vocês “podem” mudar, ok?
Em vermelho: Cor do título do post linkado.
Em roxo: Borda inferior do título do post linkado. Podem trocar o dotted por solid, se quiserem.
Em rosa: Margem superior do título do post na inicial.
#main .post h3 strong, #main .post h3 a:hover {
color:#deaa94;
text-decoration:none;
}
Em vermelho: Cor do título do post quando o mouse passa em cima.
10. Rodapé do post
Chegou a hora de personalizar o rodapé do post. Lembrando que vamos ter os seguintes itens no rodapé do post: autor do post e tags.
.post-footer {
background:url(“http://i56.tinypic.com/nef3h5.png”) no-repeat scroll 0 0 transparent;
color:#313131;
font-family:Trebuchet MS;
font-size:13px;
height:5px;
line-height:1.4em;
margin:0.75em 0;
padding-left:1px;
padding-top:5px;
width:600px;
}
Em vermelho: Vocês podem deixar como está, pois uso essa imagem para separar o post do rodapé. Se quiserem, podem fazer outro. Fiquem a vontade!
Em laranja: Cor do texto no rodapé do post.
Em azul: Fonte no rodapé do post.
Em roxo: Tamanho do texto no rodapé do post.
Em rosa: Tamanho do rodapé do post.
Em dourado: Espaçamento de linhas. Aconselho a deixar assim.
Em verde: Margens do rodapé do post.
Em azul: Margem interna esquerda.
Em vinho: Margem interna superior.
Em roxo: Largura do rodapé do post. Aqui você deve deixar o mesmo valor da largura do post, ok?
.post-footer a{
color:#c3937e;
}
Em vermelho: Cor do link no rodapé do post.
.post-footer a:hover{
color:#333333;
}
Em vermelho: Cor do link no rodapé do post quando o mouse passar em cima.
p.post-footer-line-3 {
border-bottom:1px solid #c0c0c0;
margin:0 auto;
padding:0;
}
Em vermelho: Borda inferior do rodapé do post.
11. Menu de navegação
Quem fez o espaço para o menu (inicio, sobre, etc) continua. Quem não fez, pode passar para o próximo item.
#menu {
width: 470px;
height: 30px;
background-image:transparent;
background-position:center;
background-repeat:no-repeat;
margin-top: 115px;
float: right;
margin-right: 200px;
}
Em vermelho: Largura da área de menu. Para descobrir, faça o mesmo que fizemos com a sidebar e o post. Lembrando que você pode alterar se precisar.
Em laranja: Altura da área de menu.
Em azul: Margem superior da área do menu. Altere o número até ele ficar posicionado na mesma altura que o espaço que você criou.
Em roxo: Se o menu estiver à direita, deixe como está. Se estiver à esquerda, troque por left. Se estiver centralizado, pode deixar assim, somente altere no próximo item.
Em rosa: Margem direita do menu. Se você trocou o right por left, altere aqui também.
#menu a {
color: #C3937E;
}
Em vermelho: Cor do link do menu.
#menu a:hover {
color: #deaa94;
}
Em vermelho: Cor do link do menu quando o mouse passa por cima.
#menu ul {
width: 740px;
margin: 0px auto 0;
padding: 0 0 0;
}
Em vermelho: Largura do menu. Aconselho a deixar assim, porém pode modificar caso precise.
#menu li {
float:left;
list-style-type:none;
margin-top:-3px;
}
Em vermelho: Posicionamento dos links. Se quiser que fique à direita, troque left por right.
Em azul: Margem superior dos links do menu.
.link {
width: 60px;
height: 25px;
font-family: georgia;
font-size:18px;
color:#94b2b2;
margin-left:10px;
margin-right: 5px;
}
Aqui vamos personalizar o estilo dos links do menu (como vai ficar o início, sobre, equipe, etc).
Em vermelho: Altura (aproximada) do espaço dos links.
Em laranja: Fonte usada para os links.
Em azul: Tamanho da fonte.
Em roxo: Cor da fonte.
Em rosa: Margem esquerda.
Em dourado: Margem direita.
11. Comentários
Vamos personalizar o item de comentários que fica abaixo do post, onde o leitor clica para comentar.
#comentslink {
text-align: right;
font-size: 25px;
font-family: ‘Cookie’, cursive;
width: 100%;
}
Em vermelho: Alinhamento do link do comentário. Se deixar como está, ficará à direita. Caso queira deixar à esquerda, troque right por left.
Em laranja: Tamanho da fonte.
Em azul: Fonte.
#comentslink a:link, #comentslink a:visited, #comentslink a:active {
color: #ffffff;
border: 0px solid #c7ecf1;
padding: 0 4px;
background-color: #deaa94;
TEXT-DECORATION: none;
}
Em vermelho: Cor do link do comentário.
Em laranja: Cor do fundo do link. Eu gosto de deixar uma cor mais forte aqui e uma mais clara no item anterior, pois chama atenção. Porém, se quiser deixar sem nenhuma cor aqui, apague essa linha.
#comentslink a:hover {
border:0px solid #9ec9cf;
color:#ffffff;
padding: 0 4px;
background-color: #c3937e;
TEXT-DECORATION: none;
}
Em vermelho: Cor do link do comentário quando o mouse encosta em cima.
Em laranja: Cor do fundo do link quando o mouse encosta em cima. Eu gosto de deixar uma cor mais forte aqui e uma mais clara no item anterior, pois chama atenção. Porém, se quiser deixar sem nenhuma cor aqui, apague essa linha.
.comment-link {
margin-left:.6em;
}
Em vermelho: Margem esquerda do link. Aconselho a deixar como está.
12. Tags que ficarão no rodapé do post
As tags do post serão configuradas aqui quanto à cor, tamanho, fonte e etc.
#tagslink {
text-align: left;
font-family: verdana;
font-weight: bold;
color: #333333;
font-size: 10px;
width: 100%;
}
Em vermelho: Alinhamento das tags. Se quiser deixar na direita, troque por right. Porém, aconselho a deixar assim, pois fica melhor para o leitor visualizar.
Em laranja: Fonte das tags.
Em azul: Se quiser que o link fique em negrito, deixe como está. Se não, apague essa linha.
Em roxo: Cor das tags.
Em rosa: Tamanho da fonte das tags.
#tagslink a:link, #tagslink a:visited, #tagslink a:active {
background-color: transparent;
color: #c3937e;
border: 0px solid #c7ecf1;
padding: 0 0px;
TEXT-DECORATION: none;
}
Em vermelho: Cor do fundo das tags. Se quiser colocar uma cor, troque transparent pelo código da cor que deseja.
Em laranja: Cor da fonte da tag.
#tagslink a:hover {
background-color: transparent;
border:0px solid #9ec9cf;
color:#333333;
padding: 0 0px;
TEXT-DECORATION: none;
}
Em vermelho: Cor do fundo das tags quando o mouse passa em cima. Se quiser colocar uma cor, troque transparent pelo código da cor que deseja.
Em laranja: Cor da fonte da tag quando o mouse passa em cima.
13. Data do post
A data ficará no topo do post, abaixo do título. Vamos configurar a cor, fonte, tamanho e etc.
h2.date-header {
color:#5a5959;
font-family:verdana;
font-size:11px;
line-height:7pt;
padding-left:0;
text-align:right;
text-transform:uppercase;
letter-spacing:-1pt;
margin-top:-15px;
}
Em vermelho: Cor da data.
Em laranja: Fonte da data.
Em azul: Tamanho da fonte da data.
Em roxo: Alinhamento da data. Se quiser à direita, deixe como está. Se quiser à esquerda, troque right por left.
Em rosa: Se quiser as letras todas em maiúsculas, deixe assim. Se não, apague essa linha.
Em dourado: Espaçamento entre as letras. Se quiser que elas fiquem “normal”, apague essa linha.
Em azul: Margem superior da data. Você pode alterar o valor da forma que preferir.
14. Autor no rodapé do post
Iremos arrumar a cor, fonte, tamanho e etc do “Postado por: Fulano” no final do post.
.autordopost {
color:#333333;
font-family:verdana;
margin-bottom: 5px;
margin-top: 5px;
font-size:11px;
line-height:7pt;
padding-left:0;
text-align: center;
text-transform:uppercase;
letter-spacing:-1pt;
}
Em vermelho: Cor do texto.
Em laranja: Fonte do texto.
Em azul: Margem inferior.
Em roxo: Margem superior.
Em rosa: Fonte do texto.
Em dourado: Alinhamento do texto. Está centralizado (center), mas você pode trocar por left (esquerdo) ou right (direita).
Em verde: Se quiser que o texto fique em maiúscula, deixe como está. Caso não, apague essa linha.
Em azul: Espaçamento entre as letras. Se quiser que elas fiquem “normal”, apague essa linha.
15. Rodapé da página
Vamos agora para a última parte do código: o rodapé da página.
#footer-wrapper {
background-color: #f6e4dd;
background-repeat:no-repeat;
width:100%;
height:50px;
margin:0 auto;
padding:0;
}
Em vermelho: Aqui vamos trocar a cor do rodapé da página. Se quiser colocar uma imagem, troque essa linha por background-image:url(http://LINKDASUAIMAGEMAQUI); e coloque o link do fundo no espaço indicado.
Em laranja: Altura do rodapé. Se for uma imagem, coloque o mesmo valor da sua altura aqui.
Agora vamos arrumar o estilo daquele texto (Layout feito por bla bla bla) que fica no rodapé da página.
#texto {
background-color:transparent;
width:900px;
height:15px;
margin-top: -45px;
margin-left: auto;
margin-right:auto;
clear:both;
color:#333333;
font-family:Arial;
font-size:12px;
}
Em vermelho: Tamanho do espaço onde o texto do rodapé da página ficará. Aconselho a deixar assim.
Em laranja: Altura do espaço onde o texto do rodapé da página ficará.
Em azul: Margem superior do texto. Altere como preferir.
Em roxo: Cor do texto.
Em rosa: Fonte do texto.
Em dourado: Tamanho do texto.
#texto a {
font-weight:bold;
color: #7B5342;
}
Em vermelho: Se quiser que o link fique em negrito, deixe assim. Caso contrário, apague a linha.
Em laranja: Cor dos links no rodapé da página.
#texto a:hover {
font-weight:bold;
color: #c3937e;
}
Em vermelho: Se quiser que o link fique em negrito, deixe assim. Caso contrário, apague a linha.
Em laranja: Cor dos links no rodapé da página quando o mouse encostar.
Esta é a parte do código que deixa o nome do meu blog com letras maiúsculas para diferenciar. Se quiser que aconteça no seu também, deixe assim. Se não, só apagar esta parte do código:
.ppc {
text-transform:uppercase;
}
Agora vamos arrumar o texto que aparece lá no fim da página. Procure no seu código esta parte (está bem no fim):
<a class=’ppc’ href=’http://www.juliedebatom.blogspot.com/’>Julie de Batom</a> (2012) Todo o conteúdo é criado pela equipe do blog e qualquer cópia total ou parcial devem ser creditadas ao seu devido autor.<br/>
Design e código desenvolvidos por <a href=’http://www.juliedebatom.blogspot.com’>Julie Duarte</a> | Ilustração por: <a href=’http://www.http://ivalfre.com/blog/’>Ivalfre</a>.
Se você deixou o código “ppc” lá em cima, deixe como está. Se não, apague o indicado abaixo:
<a class=’ppc’ href=’http://www.juliedebatom.blogspot.com/’>Julie de Batom</a>
Você pode trocar o texto do rodapé da página pelo que quiser. Eu gosto de deixar os créditos do
layout. Quem fizer o mesmo, não esqueça de colocar que aprendeu a fazer o
design e o código do blog aqui no Julie de Batom, ok?
UPDATE: Depois de tudo pronto, vá até o Blogspot > Design > Editar HTML e baixe seu modelo antes de qualquer alteração. Então, selecione tudo, apague e cole o código que você acabou de fazer no bloco de notas. Clique em visualizar e veja se está tudo certo. Se estiver ok, é só salvar. Se não, você pode ir alterando no próprio Blogspot e visualizando as mudanças.
_________________________________________________________________________
UFA! Terminamos a parte básica do HTML. Já falei mas vou repetir: tudo o que fizemos só se aperfeiçoa com o tempo. Caso queiram aprender algo específico, procurem no Google que lá ensina direitinho. Ensinei apenas o básico mesmo e, como vocês viram, o básico já é bem chato de entender. Para se aprimorar, pratiquem, inovem, procurem conhecer novas formas de arrumar o layout. Se ver algo legal em algum blog por aí, procure algum tutorial. Eu aprendi assim, apenas procurando aqui e ali, lendo em sites especializados e tal.
Para quem quer entender conceitos de HTML e CSS (estilos), indico o site
W3Schools. Ele é em inglês, mas vocês podem usar o tradutor. Ele é ótimo e até meu professor na ETEC o usava. Lá tem tudo sobre códigos para internet, não só HTML e CSS, como outros também.
Bom, finalizamos nosso
layout. Expliquei parte por parte, pois como cada um criou o seu, não tem como eu dizer “coloque esse número” ou “arrume assim”. Por isso dei dicas do que podem colocar ou não. Espero ter ajudado, do fundo do meu coração. Qualquer dúvida, basta deixar nos comentários (vou responder por aqui, ok?) ou no
meu perfil do Ask. E como eu disse lá no começo (como faz tempo que escrevi o começo, meu Deus…), se quiserem dar alguma sugestão de tutorial, deixem lá no Ask, também.
Espero que o post tenha ficado claro, pois tentei ensinar da forma mais fácil possível. Ele ficou meio longo porque, realmente, era muita coisa para arrumar/ensinar. Pensei em dividir a parte de código por partes, mas sei que vocês querem terminar logo o blog de vocês e também não teria sentido começar uma parte e esperar para finalizá-la. Ah, e quando terminarem seus blogs, me mostrem. Quero ver como “nosso” trabalho ficou, hein?
E vocês? Curtiram o post? Conta pra gente!
