In Tutoriais

Criando um Layout - parte 2

Exemplo Prático: Passo-a-passo na Criação do Layout
Quando comecei a entender um pouco mais sobre os modelos do Blogger, optei por usar o Travel. Mas isso não é regra; os modelos Simple também são interessantes; os dinâmicos bem completos, mas por enquanto, pouco personalizáveis. De todos, o Travel parece melhor para começar. Pois vamos usá-lo, dando sequência ao post Criando um Layout. Qualquer dúvida, pode perguntar ou consultar o template que usaremos como modelo.
Mas antes, um pequeno 'vocabulário' com algumas coisas muito usadas na hora de personalizar:
  • margin e padding: serve para determinar distâncias; margin se usa para distanciar um elemento de outro; padding para distanciar um conteúdo interno das bordas. Para definir distância em relação ao topo: margin-top/padding-top; em relação ao 'rodapé': margin-bottom/padding-bottom; em relação a direita: margin-right/padding-right; em relação a esquerda: margin-left/padding-left.
  • "px", "auto" ou "%": para determinar largura, altura, espaçamento, tipo: width: 90% = a largura vai ocupar 90% dentro de um conteúdo; height: auto = altura será definida automaticamente; margin-top: 30px = o elemento se distancia 30 pixels do topo.
  • top: topo; bottom: rodapé, parte inferior; left:esquerda; right: direita.
  • font-family: nome da fonte; font-size: tamanho da letra.
  • color: cor do texto.
  • overflow: define como o conteúdo se comporta quando ultrapassa largura e altura de onde está inserido (fonte: comocriarsites.com).
  • text-shadow: sombreamento do texto.
  • text-align: posição do texto.
  • hover: efeito quando o mouse está sobre o elemento.
  • class: identifica qual estilo será aplicado.
  • float: posição de um elemento.
  • no-repeat: faz com que a imagem não fique repetindo.
  • none: quando não quiser que algo apareça, por exemplo, quando vir display: none, o elemento que o tiver ficará oculto.
  • center: centro; justify: justificado.
  • background: cor ou imagem de plano de fundo.
  • background: #transparent: oculta um plano de fundo.
  • width e height: largura e altura/ max-width: largura máxima.
  • box-shadow: sombreamento de um elemento (rimou!).
  • border: borda/ border-radius: borda arredondada.
  • solid/dashed/dotted...: alguns tipos de bordas: linha, com tracinhos, pontilhada.
  • <div> e </div> determina styles/css/estilos, início e fim de um conjunto de elementos. Veja que tudo que é aberto e fechado em html com <abre> e </fecha>.
Entre em Modelo - Personalizar. Esse é o Designer de Modelo do Blogger. Por meio dele podemos ir mudando a aparência básica. Vá deixando assim (destaquei as partes principais para mudar):
Ao terminar, clique no botão Aplicar ao Blog e em Voltar para o Blogger.
Clique em Layout e remova o gadget Páginas (se estiver usando) porque usaremos um menu feito a mão. Para remover Navbar, clique em Navbar - Editar - Desativado. E para adicionar Favicon (ícone que aparece ao lado do nome do blog), clique em Favicon - Editar e escolha a imagem que preferir.  Aqui no blog tem alguns, só procurar por mini gifs, como esses. Salve.
Clique em Modelo - Editar HTML. Clicando na área do HTML e depois nas teclas Ctrl+F, fará aparecer uma caixinha de pesquisa, ou seja, é assim que buscamos por qualquer coisa no template :3
1 - Cabeçalho e Background:
Encontre:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Achou? Nosso cabeçalho irá ocupar toda a tela do PC; para isso vamos usar aquele tutorial de 2 backgrounds, deixando assim:
/* Content
----------------------------------------------- */
body, html {
 height: 560px;
 margin: 0;
 padding: 0;  }

body {
background: url("http://4.bp.blogspot.com/-8X9l2z4ALpI/U7YH-vjjiQI/AAAAAAAANUw/tvIPaWKtoqY/s1600/header2.png") no-repeat top center; }

html {
 background: url("http://1.bp.blogspot.com/-khvSnktdEkY/U7X7i2Jgi1I/AAAAAAAANUg/LLwrF-CBKzc/s1600/bigbg.jpg") repeat; }

A primeira imagem é o cabeçalho e o 560px equivale a altura dele; a segunda é o background. Para adicionar um cabeçalho você pode usar Layout e editar o gadget cabeçalho também; nesse caso não faremos isso. Agora encontre:
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}

.Header h1 a {
  color: $(header.text.color);
}
Essa área personaliza o texto com o nome do blog; deixe assim:
.Header h1 {
  font-family: 'Petit Formal Script', cursive;
  color: #fee;
  font-size: 80px;
  text-shadow: 1px 2px 3px #fcc;
  text-align: center;
  margin-top: 120px;
  margin-left: 400px !important;
  width: 500px;
}

.Header h1 a {
  color: #fee;
}
Viram que ali tem o nome de uma fonte (Petit Formal Script)? Para usar qualquer fonte do Google, você deve acessar aquele link que mencionei no post anterior, buscar a fonte que quiser, e colar antes de </head>, assim:
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'/>
 </head>
 

2 - Personalizar links:
Encontre:
a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
Mude para:
a:link {
color: #ffcde4;     
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #ffcde4;   
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #93e1fe;    
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
Esse efeito nos links é chamado fade. Para os links da sidebar, acrescente antes de </b:skin>:
.sidebar .widget a:link {
color: #eb99f7;     
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
.sidebar .widget a:visited {
color: #ffcde4;   
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
.sidebar .widget a:hover {
color: #93e1fe;    
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

3 - Posicionar área de posts e sidebar de acordo com o cabeçalho:
Viram que o cabeçalho ficou oculto pelas postagens e sidebars? Encontre:
.main-inner {
  padding: $(content.padding) 0;
}
Acrescente:
.main-inner {
  padding: $(content.padding) 0;
margin-top: 95px;
}
Quanto maior o número em margin-top, mais distante fica o topo da área de post e barras laterais. Use sempre que quiser distanciar alguma coisa em relação ao topo. Veja aqui como posicionar sidebar e posts.

Agora vamos usar apenas CSS nessa parte, ou seja, tudo será adicionado antes de </b:skin>
4 - Personalizar data de modo simples:
.date-header{
float:left;
background: #fee url(http://2.bp.blogspot.com/-EwEiAF8PARI/UCE65CQAAJI/AAAAAAAAC78/GsETSjzHk7M/s1600/ee60.gif)no-repeat bottom;
border: 1px solid #fee;
border-radius: 50%;
box-shadow: 2px 2px 2px #fcc;
width:90px;
height:60px;
overflow:hidden;
margin-top:-60px!important;
margin-left:-30px!important;
text-align:center!important;
padding:10px;
font-size: 12px!important;
color:#fff!important;
text-shadow: 1px 2px 3px #fcc;
font-family: 'Petit Formal Script', cursive!important;
}
Veja que em background dá para usar cor e imagem juntos :3
Para data em forma de calendário clique aqui.
5 - Redimensionar automaticamente as imagens:
.post a img, .post img {
  max-width: 95%;
  margin: 0 auto;
}
6 - Área de Postagem:
/**titulos**/
.post h3 a, .post h3 a:visited, .post h3, .comments h4 {
color:#F5B3FF;
font-size:22px;
font-family: 'Petit Formal Script', cursive;
text-shadow: 1px 2px 3px #fcc;
text-align: left;
text-decoration: none;
}
.post h3 a:hover {
font-family: 'Petit Formal Script', cursive;
color: #fee;
text-align: center;
text-decoration: none;
 -webkit-transition-duration: .30s;
}
/**area da postagem**/
.post{
color: #a1a1a1;
font-size: 12px;
text-shadow: 1px 2px 3px #eee;
text-align: justify;
padding-right:10px;
padding-left: 10px;
}
/**rodape do post**/
.post-footer {
  margin: .5em 0;
  line-height: 1.6;
background: none;
color: #fcc;
width: 500px;
font-size: 12px;
text-align: left;
}
.post-footer a{
color:#fcc;
}
.post-footer a:hover{
color:#fcc;
}
/**estilos das listas**/
.post ul li {
 list-style: none;
 margin: 0;
 padding: 0;
 padding: 0 0 4px 12px;
 background: url("http://3.bp.blogspot.com/-vkbZA3XKD0o/TzlG0L6QMzI/AAAAAAAAFAk/ge9NvSs21Z4/s1600/731.gif") no-repeat 0 2px;
}
/**estilo do leia mais**/
.jump-link {
font-weight: bold;
font-size: 26px;
font-family: 'Petit Formal Script', cursive;
text-align:right;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #5FFAE1; /* Cor do texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
color: #fee; /* Cor do texto */
text-decoration:none;
}
/**formatacao de texto**/
u {/* Sublinhado */
text-decoration:none;
color:#c8e7eb;
border-bottom: 1px solid #c8e7eb;
-webkit-transition: 0.4s;
}
u:hover {/* Sublinhado hover */
border-bottom: 1px solid #fee;
-webkit-transition: 0.4s;
}
b, strong { /* Negrito */
color: #c8e7eb;
font-weight: bold; 
}
i,em { /* Italico */
color: #c8e7eb;
text-decoration: none;
}
strike { /* Riscado */
text-decoration: strike;
color:#c8e7eb;
}
strike:hover { /* Riscado hover */
text-decoration: none;
color:#fee;
}
7 - Sidebar/Barra Lateral
/**largura**/
.sidebar .widget {
width: 150px;
}
/**titulos dos widgets**/
.sidebar .widget h2 {
width: 150px;
border-radius: 20px;
background: #fee;
font-family: 'Petit Formal Script', cursive;
font-size: 14px;
text-align: center;
color: #fff;
text-shadow: 1px 2px 3px #fcc;
}
/**estilos das listas**/
#sidebar ul {
 list-style: none;
 margin:0 0 10px 0;
 padding:0;
}
.sidebar ul li {
 list-style: none;
 margin: 0;
 padding: 0;
 border-bottom:1px dotted #C1C1C1;
 padding: 0 0 4px 12px;
 background: url("http://3.bp.blogspot.com/-vkbZA3XKD0o/TzlG0L6QMzI/AAAAAAAAFAk/ge9NvSs21Z4/s1600/731.gif") no-repeat 0 2px;
}
8 - Remover o Assinar Postagem Atom:
.feed-links {
display:none;
}
 
9 - Menu com Texto Colorido
a.mc {
width: 100px;
height: 100px;
color:#FFD6E3;
font-family: 'Petit Formal Script', cursive;
font-size: 30px;
text-shadow: 1px 2px 3px #fcc;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {
text-decoration: none;
color: #C1E3F2;
-webkit-transition:2s;
}
a.mc1 {
width: 100px;
height: 100px;
color:#C1E3F2;
font-family: 'Petit Formal Script', cursive;
font-size:30px;
text-shadow: 1px 2px 3px #fcc;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
color: #FFD6E3;
-webkit-transition:2s;
}
Acima, você viu o CSS, ou seja, aquilo que dá aparência ao menu, que especifica suas cores, largura, altura, efeitos...devemos adicionar o html. Aí procure por </header> e acrescente abaixo o código que fará o menu aparecer:
<div style='position:absolute; left: 350px; top: 430px;'>
<a class='mc' href='LINK'>Home</a>
<a class='mc1' href='LINK'>NOME-DO-LINK</a>

<a class='mc' href='LINK'>NOME-DO-LINK</a>
<a class='mc1' href='LINK'>NOME-DO-LINK</a>

</div>
Note que class é onde colocamos o nome que demos ao CSS; se não especificarmos isso, apareceriam links normais. Vejam também que para posicionar o menu, usamos CSS não adicionado antes de /b:skin, definindo entre <div> e </div>
Para posicionar elementos em HTML, veja aqui.

Outros:

Vamos usar mais dois scripts super úteis, lembrando que scripts em excesso podem fazer o blog não funcionar direito, tipo ficar travando; scripts você cola antes de </head>
JQuery: é muito usado! Sempre é bom tê-lo no HTML; se você tiver, basta buscar versões mais recentes e não precisa repeti-lo.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Lazy Load: para carregar imagens de forma mais rápida, conforme a navegação
<script src='http://db.tt/YiV6Emfb' type='text/javascript'/>

Salve suas modificações após visualizar. Fizemos um geralzão! Bem, como disse no post anterior, mostraria os itens "padrão" que uso quase sempre em todo layout. Acho que não pode faltar:
  • Cabeçalho, logo, ou qualquer coisa que faça com que as pessoas associem como sua marca, SEU blog;
  • Menu principal de páginas e caixa de pesquisa;
  • Menu de redes sociais e informações sobre autor, blog, contato, que pode ser inserido nos gadgets;
  • Personalizações no Tooltip, Blockquote, Lista de Marcadores, Read-more/Leia mais e outras coisinhas típicas de plataformas para blog;
  • Área de posts organizada, com imagem no tamanho certo, texto legível e justificado, links destacados, formatações de texto customizadas, códigos destacados (em blogs de tutoriais); botões de Compartilhar em redes sociais;
  • Área de Comentários organizada;
  • Personalização na sidebar, nos títulos, gadgets/widgets com tamanho certo;
  • Favicon (opcional, mas fica perfeitinho ver o símbolo na aba do navegador).
É isso. Espero ter ajudado e que tenha conseguido explicar direitinho. Vocês podem dar uma olhada nos tutoriais aqui do blog para adicionar mais coisinhas em seus layouts. Sugestões, dúvidas, críticas...só comentar.Beijus...

Related Articles

19 comentários:

  1. Olá!
    Primeira vez no seu blog, e achei tudo super lindoo!
    E menina, que paciência de ensinar html! rs eu já apanhei muito com isso e sei bem como é bom ter alguém para ajudar, parabéns!

    www.decifrando.com

    ResponderExcluir
    Respostas
    1. Realmente é bem complicado :)
      Até que a gente vai pegando o jeito neh...e sempre aparece uma novidade, atualizam-se coisas e tal...mas é boa distração :D
      Obrigada e beiju. Espero vê-la mais vezes por aqui :3

      Excluir
  2. Muito Bom ! Adorei o post! Seguindo seu blog já. Dá uma passadinha lá no meu:
    Beijinhos!!

    http://jovem-blogueira.blogspot.com.br/

    ResponderExcluir
  3. que santa paciência para explicar garota,rs,rs,adorei o post,vou testar

    ResponderExcluir
  4. Já faz um tempo que estava fora da blogosfera (mas agora estou retornando) por consequência não vinha aqui a tempos, mas vejo que seu blog está cada vez mas fofo e melhor, parabéns!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que voltou! Fico muito contente!!! Seja sempre bem-vinda :D

      Excluir
  5. Robertaaa, fico tão feliz com a sua permanência no blog, o Reino Kawaii é um dos meus blogs favoritos <3 Ensinando a criar layout você é muito bondosa, tantos layouts lindos que já passaram por aqui. Aprendi a fazer html no meu curso técnico de informática (que desisti) mas gosto muito de html, só não de um monte de códigos... vai entender :\ Obrigada por essa postagem, não é fácil, eu realmente amo seus resources, dicas de sites, aplicativos, programas enfim... ^_^

    yeah-dreamhigh.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada :D
      Eu também fico muito feliz em ver pessoas fofas como vc aqui também <3
      Bjus...

      Excluir
  6. adorei. deu jeitinho^^
    www.lucy-mundokawaii.blogspot.com

    ResponderExcluir
  7. Oi Roberta, pode me explicar como saber as medidas do meu blog pra criar um cabeçalho pra encaixar perfeitamente no blog? Beijos. Ótimo post <3

    ResponderExcluir
    Respostas
    1. Pelo Designer do Blogger você define as larguras (Ajustar larguras); se por exemplo definir uma largura de 970px, o ideal é que o cabeçalho tenha essa mesma largura; se fizer um cabeçalho para o blog inteiro, usando aquele tutorial de 2 backgrounds que tá no post, pode fazer da largura da sua tela mesmo...eu gosto de usar essa segunda forma.

      Excluir
    2. Então, mas como eu sei a largura da tela? Tipo: tem tutos que falam: "Ah, ai vc faz o cabeçalho da largura do blog (ou da tela nesse caso)" mas como eu descubro?
      ~desculpe a minha burrice sobre o assunto~

      Bj.

      Excluir
    3. Bom, geralmente as telas de hoje tem resolução de 1280px ou mais; então crie uma imagem maior que esse tamanho, por exemplo, uns 1360px, centralizando os itens principais como imagens (sem ser o plano de fundo) e textos,para ficar 'visíveis' em todo pc, porque pode ter tela de 1024px também. Imagina, não é burrice perguntar.

      Excluir
    4. Oi denovo hihi! Isso seria de altura e de largura?

      Bj.

      Excluir
    5. Sim :3 Por exemplo, 1365px de largura e 500px de altura. Bju...

      Excluir
  8. Sou nova aki no blog,mais ja estou seguindo,o lay ficou super lindo / kawaii no seu blog. Sinceramente você manda muito bem em fazer lays. *-* Me ajudou bastante essas pequenas aulinhas (pequenas aulinhas,ahtah) de fazer lays,santa paciencia você tem em deixar tudo organizadinho e escrever um textão desses!!! Good Bye
    *0*

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart