fbpx
Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

DIY: Layout para blog (parte 3)

Recebo muitos comentários no blog, Twitter (@juduartt) e e-mail perguntando como faço meus layous, se faço encomendas e quanto cobro… Como a rotina da faculdade é bem pesada, fica impossível atender todos os pedidos, então não faço para não deixar ninguém de fora. Foi pensando nisso que criei a tag design no blog, assim disponibilizo alguns de meus trabalhos (gratuitamente) para vocês.
Porém, sei que muitos curtem ter o blog com sua cara, mais personalizado. Então, aqui vou eu (tentar) ajudá-los novamente: a partir deste post, vou fazer um tutorial passo-a-passo de como eu crio meus layouts. Além de guiar vocês, ainda vai ajudar (ou assim espero) quem está louco para aprender. 
A primeira e a segunda partes já estão no ar e fiquei super feliz de saber que vocês gostaram da ideia e ficaram ansiosos pelos próximas aulas. Quem está perdido e só está vendo esse post, vale dar uma olhada nos dois anteriores. Dei muitas dicas legais por lá. Mas agora, vamos ao que interessa: a continuação.
Na segunda parte nós terminamos o design. Ele ficou mais ou menos assim:
Agora, na terceira, nós vamos começar a parte mais chata, porém a principal: o código HTML.

Para o post não ficar gigante e vocês não perderem tanto tempo, fiz um modelo de código onde nós vamos mexer no estilo (CSS) para modificar nosso layout. Assim como no design, HTML também precisa de prática. Quem quer aprender algo específico (ex: título do post de cor diferente), vale procurar no Google. Lá tem vários links ensinando a fazer coisas bem legais no Blogspot. E qualquer dúvida, vocês podem perguntar no meu Ask ou deixar um comentário no post.
Então, vamos lá! Neste post nós vamos precisar:
Adobe Photoshop (ou outro editor de imagens que você usou).
Modelo do código (download aqui ou aqui)
Um site para hospedar as imagens (vou usar o Imageshack)
Dica: deixe o Photoshop aberto. A gente pode precisar dele!
1. Feito o download do código, abra-o no bloco de notas ou, caso fique tudo misturado, no Word Pad. O código já está certinho e a gente só vai ajustar a posição de tudo na página e as cores. Depois, caso queiram colocar algo (foto do autor, redes sociais, etc), faço post só ensinando isso. Certo?
2. Vamos começar na ordem que o código está no documento. Quem não entende de HTML, peço que só mexa no que eu for explicando, assim corre menos risco de cometer algum erro. Bom, vamos lá:
3. Background da página
O primeiro item que vem no código é o body, ou seja, o corpo da página. Lá nós vamos configurar a cor ou imagem de fundo, a fonte e a cor dela. Sigam:

body {

background-image:url(http://LINKDASUAIMAGEMAQUI);
color:#333333;
font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
font-size:11px;
margin:0px 0 0;
text-align:center;}

Explicando:
Em vermelho: Aqui nós vamos mudar a imagem de fundo do blog. Se você usou textura no fundo do layout, hospede-a e cole o link direto aí. Exemplo: http://img193.imageshack.us/img193/1908/24594794.jpg.
Quem quiser colocar uma cor ao invés de usar uma imagem, o código ficará assim: 
background-color: #ffffff.;
Troque o ffffff pela cor desejada. Você pode consegui-la no Photoshop, assim:
Abra o layout que nós criamos. Então, clique na paleta de cor primária: 

Vai abrir uma janelinha assim:

Depois leve o mouse para a cor que deseja “pegar” (no caso, a do background) e copie o código que está após o #. Cole no código.
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á.
4. Cor dos textos
O segundo item do código nos permite trocar a cor do texto da página.

p {
color:#333333;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}

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.

5. Cor dos links

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.

a {
background-color: transparent;
border-bottom: 0;
color: #ce937a;
text-decoration: none;}

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.

a:visited {
background-color: transparent;
color: #ce937a;
text-decoration: none;
border-bottom: 0px dotted #FFFFFF;
}

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á.

a:hover {
background-color: transparent;
color: #333333;
text-decoration: none;
border-bottom: 0px dotted #FFFFFF;
font-style: normal;
}

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. 
6. Topo da página
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)

#header-wrapper {
background-image:url(http://LINKDASUAIMAGEMAQUI);
margin:0;
background-repeat: no repeat;
width:1080px;
height: 500px;
}

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.

7. Meio da página
Nesta parte nós vamos fazer com que a área dos posts, sidebar e background se “repitam” na página. Para isso, abra a imagem do seu layout no Photoshop e siga as dicas a seguir:

Com a ferramenta de seleção (atalho: M), selecione a parte indicada da imagem:

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:

#outer-wrapper {
background-image:url(http://LINKDASUAIMAGEMAQUI);
background-repeat:repeat-y;
width: 1080px;
margin:0 auto;
padding:0;
text-align:justify;
}

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.

8. Sidebar

Antes de continuar com a sidebar, veja no Photoshop qual é a largura do espaço que você utilizou para criá-la. Você pode selecionar o retângulo (lembrando que a seleção tem que ficar certinha ou quase certinha na largura), ir em Edit/Editar > Copy Merged/Cópia mesclada (ou Shift + Ctrl + C), criar um novo documento e ver o número que está na largura. Este número (ou um próximo, caso a seleção não tenha sido perfeita) é o que você vai usar na largura da sua sidebar.

#sidebar-wrapper {
width:275px;
height: auto;
background-color:transparent;
float: left;
padding-bottom: 10px;
margin-left: 53px;
margin-top: -130px;
padding-right: 10px;
padding-left: 10px;
}

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.

#sidebar-wrapper p {
color:#333333;
font-family:Arial,Helvetica,sans-serif, Verdana, Tahoma;
font-size:12px;
}

Em vermelho: Cor dos textos na sidebar.

Em laranja: Fonte dos textos na sidebar.

Em azul: Tamanho dos textos na sidebar.

#sidebar-wrapper a {
color: #7b5342;
text-decoration:none;
  }

Em vermelho: Cor do link na sidebar.

#sidebar-wrapper a:hover {
color:#333333;
 text-decoration:none;
}

Em vermelho: Cor do link quando o mouse encostar nele.

#sidebar-wrapper h2 {
background: url(“http://LINKDAIMAGEMAQUI”) repeat scroll 0 0 transparent;
color: #deaa94;
font-family: “Terminal Dosis”, “sans-serif”;
font-size: 20px;
text-transform: uppercase;
font-weight: normal;
height: 25px;
margin-bottom: 5px;
margin-left: 0%;
margin-right: 5%;
margin-top: 10px;
padding-top: 3px;
text-align: center;
width: 275px;
}

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 verde: Altura do título da sidebar. 
Em azul: Margem inferior do título.
Em roxo: Margem esquerda do título.
Em vinho: Margem direita do título.
Em laranja: Margem superior 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!

Compartilhe o post

14 comentários
  • Jessica
    julho 17, 2016

    Estou super triste aqui, fiquei horas fazendo toda animada, mas não sei o que eu fiz de errado… Não deu nada certo :/
    Quando tento salvar aparece um aviso de erro (É possível que a edição do modelo combinando HTTP e HTTPS afete a segurança e a experiência do usuário no seu blog quando ele é visto usando HTTPS.) e não deixa eu visualizar o modelo.
    Mas mesmo assim, parabéns pelo tutorial!!!

    • Juliana Duarte
      julho 17, 2016

      Jess, o Blogspot mudou algumas coisas com o tempo e pode ser que alguma parte do código seja ~antiga~ sabe? Vou olhar e atualizo o tutorial 🙂

  • Jully 483!
    novembro 15, 2013

    A imagem do topo se repete em vez de repetir a do meio eu ja cheguei os links todos estão corretos me ajuda D:

  • Tamyris kortschinski
    agosto 11, 2013

    Julie, consegui fazer quae tudo… mas a sidebar deu erro. Não aparecem os widgets e diz que a "sidebar-right-1" é uma id invalida, o que faço?

  • Viviane Veloso
    maio 17, 2013

    Julie, muito obrigada pelo post. Mas estou tendo um pequeno problema com o menu. Os meus links "Inicío", "Perfil" não funcionam. Me ajuda! 🙁

  • Carol Mascarenhas
    abril 14, 2013

    Eu fiz tudo certinho como você ensinou, mas na hora de fazer o upload pro blog, fala que tem link que não tá fechado, fucei o template inteiro pra ver se tinha algum aberto, mas não tem nenhum. O que eu faço?

    http://dezesseispensamentos.blogspot.com.br

  • I Love My Pc
    dezembro 5, 2012

    tendi nada kkk' post enorme !

  • Jéssica Macedo
    julho 29, 2012

    Olá, eu estava super ansiosa para fazer um layout. Segui todos os passos corretamente e os repeti uma tres vezes. Mas, infelizmente, não consegui. Na hora ficou tudo embolado e nenhuma imagem queria aparecer. 🙁
    Acabou que me virei sozinha com o que estava tentando fazer. Dá uma olhada e diga o que achou, por favor.
    link: http://www.sorrisoscontentes.blogspot.com.br

  • Daiane
    julho 29, 2012

    Hey flor estou usando um lay seu, vaila no blog ver como ficou.
    Beijos
    Flores de Marshmallow

  • Eu quase consegui, mas chegou na hora o layout ficou todo embolado…
    Enfim, eu vou usar o primeiro layout grátis que você disponibilizou, uma perguntinha: Eu posso alterar algumas coisas nele? Seleção colorida, blockquote personalizado e tals…

    4-brownies.blogspot.com

  • larissa
    julho 29, 2012

    LOL adorei todos os tutoriais! haha! Desde que sai do uol blog que não faço mais layouts assim HAHAH a preguiça é belíssima!
    ah eu amo seu blog ♥
    e que paciência que você teve fazendo esse tutorial! lol
    beijos!

  • Lunara
    julho 29, 2012

    Estou aprendendo!
    Explica muito bem e é tudo detalhado… Perfeito!

    To amando essas dicas!

    Você é ótima!

  • Mia Sodré
    julho 29, 2012

    Haja paciência pra postar um super tuto desses, hein, Julie? Nossa. Acho que eu não teria essa paciência, não.
    Obrigada por explicar direitinho. Tenho certeza de que esses códigos ainda serão muito usados.
    Beijo!

Deixe seu comentário!

O seu endereço de e-mail não será publicado.