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:
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):
- 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>.
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
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFTngGpDole8kqOFWVnAlnAlZmIerzfveSJ8vpX6OTBnVv-WBi7FQnPshiwbGMQxRBuOfvMSA1HRbeNj-_hA_kxM_-XQyiaQvN_zmPR8FAR1s8axvYEW9MQzX_RdfyL0YwyjuPySoPfPY/s1600/header2.png") no-repeat top center; }
html {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXpKSQm-5sj1QoNyTscnPiCq3v_ml4xkBgrvSL4nIyPTlg8BSUCuW0VDd7obtMFXBUjad1H_r29mBwftzgTtUOeaJv8SyY1EvvsVqXsC09He_qrQXhOLhOViZqI-8LTupmfrJLYbXw6Q/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>
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>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZvWLIyIzT4etC0de1-_V2x35ngJNe27a4pIVQ8cGK46GfdnkZRACIfPIC0NM3P7iyrCZl4YHBbDqa1Nzpwwa3PZ8EgX8Pd1ze1XB4Pw0y4JCTc8RpsMKbjLn12IBFBWakeOUXDloFt8/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGfZPa_-d8KM222ObBPxB98OwsPFCk_Mgt6AVEG0Qv3c6PR9p_KUNogsfLoe02wAGwNPQ2WSNGL3AL8GyaVS07Pk0fROKVCLT8bldfC8ysfMzZ-mAerAeFLPivwDQaBWxaGecZ4HbH8po/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**/
/**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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGfZPa_-d8KM222ObBPxB98OwsPFCk_Mgt6AVEG0Qv3c6PR9p_KUNogsfLoe02wAGwNPQ2WSNGL3AL8GyaVS07Pk0fROKVCLT8bldfC8ysfMzZ-mAerAeFLPivwDQaBWxaGecZ4HbH8po/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>
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:
- Remover borda serrilhada típica do Travel;
- Blockquote - área em que se destacam textos, citações...;
- Para deixar as sidebars coloridas;
- Mudar cor do texto selecionado e personalizar scrollbar (barra de rolagem);
- Personalizar Tooltip;
- Personalizar Comentários;
- Inserir Divisórias;
- Postagens e Sidebar separada (aí no caso não use a personalização para posts e sidebar desse post; ou um, ou outro :D)
- Remover Attribution.
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...
19 Comments
Olá!
ResponderExcluirPrimeira 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
Realmente é bem complicado :)
ExcluirAté 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
Muito Bom ! Adorei o post! Seguindo seu blog já. Dá uma passadinha lá no meu:
ResponderExcluirBeijinhos!!
http://jovem-blogueira.blogspot.com.br/
Obrigada! Bem-vinda! Beijus :3
Excluirque santa paciência para explicar garota,rs,rs,adorei o post,vou testar
ResponderExcluirJá 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!
ResponderExcluirBeijos,
Camila Angelina
http://cantinhodacaps.blogspot.com.br/
Que bom que voltou! Fico muito contente!!! Seja sempre bem-vinda :D
ExcluirRobertaaa, 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... ^_^
ResponderExcluiryeah-dreamhigh.blogspot.com
Obrigada :D
ExcluirEu também fico muito feliz em ver pessoas fofas como vc aqui também <3
Bjus...
adorei. deu jeitinho^^
ResponderExcluirwww.lucy-mundokawaii.blogspot.com
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
ResponderExcluirPelo 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.
ExcluirEntã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?
Excluir~desculpe a minha burrice sobre o assunto~
Bj.
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.
ExcluirObrigada Roberta <3
ExcluirOi denovo hihi! Isso seria de altura e de largura?
ExcluirBj.
Sim :3 Por exemplo, 1365px de largura e 500px de altura. Bju...
ExcluirSou 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
ResponderExcluir*0*
Obrigada e bem-vinda!!!!
ExcluirBeijus <3
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 - Deviantart