Hoje vim trazer uma novidade que há bastante tempo eu queria trazer para vocês. Lembram que esses dias eu comentei com vocês que iria trazer um Guia de Blogueiras? Então hoje enfim sai o primeiro post dessa coluna aqui do blog. Bom para quem não sabe, clica aqui que eu expliquei nesse post.
Essa ideia do Guia de Blogueiras eu já estava querendo fazer há muito tempo, desde o começo do ano. Mas só esse mês que eu decidi colocar em prática. Comecei esboçando na agenda do blog os posts que seriam feitos sobre o assunto, e até o momento dividi em vários posts por assunto, ou seja, estarei sempre trazendo coisas novas nessa tag/coluna aqui do blog, provavelmente 1 post/semana.
E o primeiro post que eu decidi trazer é um guia de como criar um layout desde o início. Como vocês devem saber, no início do blog o foco dele era postar tutoriais para personalizar o blog, e aos poucos fui deixando de lado e mudei o foco dele. Mas até hoje, muuuitas pessoas procuram o blog, e comentam nas postagens antigas pedindo ajuda no design do blog. E como sei que isso é muito importante no blog, o design é a primeira coisa que um visitante vê ao entrar no blog, e tem que estar bem organizado, não precisa ser lindo, a organização já ajuda muito.
Clique em leia mais e vamos começar ao trabalho!
Iremos começar um layout básico desde o início de tudo!
Escolha o Modelo
Depois de você ter criado o blog, colocado o nome, URL e feito todo aquele processo, o próximo passo é escolher o modelo. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. E aos poucos ir mudando e personalizando ele. Para isso vá em modelo > Design de Modelo > Modelo > E escolha o modelo a Viagem, depois escolha o modelo Travel (azul com branco).
Escolha do Plano de Fundo
Agora vá em "Plano de fundo" vai aparecer a imagem que está no fundo do blog, e embaixo escrito "Remover Imagem" clique ali. Vai ficar um fundo azul mas já vamos resolver isso.
- Plano de fundo: É o principal, quando a gente entra num blog é praticamente o primeiro a se ver. Não use cores fluorescentes, prefira sempre tons de cinza ou clores claras. Assim você não deixa um clima poluído no blog. Ou também vale apostar na escolha de um escuro também. Encontre aqui vários backgrounds para deixar seu blog com a sua cara.
Imagem de background
Depois de ter escolhido a imagem que será seu plano de fundo, temos algumas sugestões aqui, clique na setinha com pontinha pra baixo do lado da imagem que estava no fundo, então vá em "Fazer upload da imagem" . Escolha o arquivo que você quer que fique como background do blog.
Agora vá em layout e escolhe o modelo que a setinha está apontando, assim a sua sidebar ficará do lado direito do blog. Caso não queire escolha outros modelos, recomendo que escolha o do lado direito, como na imagem.
- Colunas: ou a sua sidebar fica na direita, ou na esquerda. Se você optar por duas colunas num blog fica feio, e na minha opinião 2 colunas é usado para colocar muitos gadgets, que é a mesma coisa que desorganização.
Após isso vá em "Ajustar Larguras", esse é mais ou menos o tamanho "padrão" dos blog, mas ai você pode ir ajustando no tamanho da sua preferência, ou até se encaixar no seu estilo.
- Larguras: Uma coisa que eu não suporto são blogs muitos largos, realmente não fica muito bom. Mas essa escolha é uma opção de cada um.
Personalizar cores
O próximo passo é onde vamos arrumar a fonte e as cores da fonte, vá para a opção avançado e vá em Texto da página, que é a fonte, a cor e o tamanho do texto das suas postagens. Recomendo que use Arial.
E as seguintes cores pro texto:
(copie código por código e vá testando)
#969696 | #666666 | #000000
Próximo passo é o plano de fundo da página, deixe os dois transparentes como mostra a imagem abaixo.
Vá para Titulo do blog e deixe a cor em transparente e o tamanho em 0px .
A intenção é o nome do blog não aparecer no cabeçalho, pois vamos colocar uma imagem.
Agora vá em plano de fundo de postagem, e deixe na cor branco.
Depois disso vá em Plano de fundo da barra lateral, que ai é a sidebar.
Deixe a cor da moldura transparente e na cor do plano de fundo coloque uma cor clara que agrade a você.
O resto não tenho muito o que dizer. Então você edita o que falta, se quiser. Mas use cores que combinem com as que você está usando. E não altere o que já foi feito até agora. Depois disso salve.
Retirando bordas feias
Depois de ter feito tudo isso vamos editar o template, para ficar com estilo e não ter mais aquela cara de template pronto do blog. Primeiro vamos tirar aquelas ondinhas que ficam em cima do template.
Vamos em Modelo, editar HTML, e procurar por : content-outer .content-cap-top {
Apague todo o código marcado e visualize, ficará assim
Pronto, agora ele já está menos feinho. A parte difícil já foi, agora vamos deixar ele mais personalizado e bonitinho, para isso separei algumas postagens que serão úteis para vocês.
- Negrito, itálico, sublinhado e riscado
- Efeito nas imagens
- Mudar fundo dos comentários
- Algumas opções de menu
- Seleção do mouse colorida
- Barra de rolagem colorida
- Personalizar o título dos gadgets
- Personalizar o rodapé do blog
- Personalizar data dos posts
- Personalizar caixa de pesquisa
- Como colocar Slide no blog
- Como deixar o nome do blog digitado
- Faixas para sidebar
- Backgrounds para blog
E nessa página de Goodies, temos outras posts para ajudar na personalização.
Dúvidas ou sugestões? Comentários abaixo!
38 Chocolates viraram Cupcakes
Oi Giselle, muito interessante e útil o seu post! Adorei =D
ResponderExcluirObrigada Carol
ExcluirBeijos
Oi flor! Seu post ficou hiper completo, parabéns!
ResponderExcluirAmei a sua ideia de fazer um guia para blogueiros também, é sempre bom ver pessoas que compartilham conosco a sua experiência como blogueiro, amei!
Beijinhos
www.doceabril.com.br
É verdade, eu adoro compartilhar coisas aqui no blog.
ExcluirE vou gostar bem dessa tag.
Obrigada Midia
Beijos
Muito bem explicado adorei as dicas, bjs
ResponderExcluirhttp://dicascoisasdemulher.blogspot.com
Obrigada Rose.
ExcluirBeijos
Adorei o post, é bem útil, e super necessário,vou começar a faze rum layout novo
ResponderExcluirbeijos
Ussa essas dicas Lola, vc vai gostar
ExcluirBeijos
Adorei isso, vou admitir: sou pessima nisso e acho que depois disso irá ajudar muito. Bjs
ResponderExcluirhttp://asgarotasdonl.blogspot.com.br/
Que bom que pude te ajudar nessa rs.
ExcluirBeijos
Adorei o post, e é super útil para as pessoas que estão começando a aprender a fazer layouts, não é verdade??
ResponderExcluirPassa no meu blog e comente o que achou http://invasao-de-pandas.blogspot.com.br/!
Sim é muito bom mesmo. E ajuda muito quem ainda nao sabe ne
ExcluirBeijos
Fazer um tuto desses tem que ter muita disposição amiga!! Parabéns pela utilidade e riqueza de detalhes...^^
ResponderExcluirbeijos beijos
¦ Blog Dany's Place
¦ Tutorial e Dicas
Demorou um poucao mesmo para fazer rs.
ExcluirFico feliz que gostou.
Beijos
Gostei e favoritei, c: não sou muito boa com essas coisas
ResponderExcluirBeijos, Joy
http://blog-acridoce.blogspot.com.br/
Fico feliz que pude te ajudar nessa linda.
ExcluirBeijos
Eu sempre edito o meu e eu amo ele mas tô mega triste pq ele ta demorando anos pra carregar, tô pensando seriamente em encomendar um!
ResponderExcluirBeijos da Cássia:*
www.nosolhosdequemviu.blogspot.com
É eu vi lá que tava demorando mesmo.
ExcluirDeve ser algum script que ta fazendo isso.
Beijos
ahhh curti! Esse tipo de post é muito bom!
ResponderExcluirBom saber que fazer um lay não é tão dificil assim kkk, o dificil é os detalhes ne?
bjs
É verdade amiga, nao é tao dificil. Apenas exige um conhecimento de html, e disposição ne
ExcluirBeijos
Esses tutoriais sempre são uteis, parabéns pela ideia do Guia de Blogueira ;)
ResponderExcluirObrigada Cassia.
ExcluirSao bons sim ne
Beijos
Este comentário foi removido pelo autor.
ResponderExcluirO post da varias dicass otimas para quem não sabe mecher em um layout ainda,o ultimo do me blog é free mais eu até que gosto de fazer os meus propios.
ResponderExcluirAmei seu blog muito fofo ele!
bonecadeetiqueta.blogspot.com.br/
Eu tbm gosto, e faz tipo bastante tempo que nao mudo esse rs
ExcluirBeijos
Ótimo tuto meu amor!
ResponderExcluirParabens!
Teamo!
-> As inscrições para o ENEM 2013 já encerraram! Como está a sua preparação? Acesse: www.estudajovem.com.br - Estuda Jovem!
Obrigada amorzinho
ExcluirBeijos
Eu também faço meu layout mais ou menos assim, porém retiro a borda de papel do modelo viagem primeiro, depois vou fazendo o restante!
ResponderExcluirO post é muito útil flor!
Kissus
modaetutorial.blogspot.com
Aaaim sim. Bom nao interfere em nada ne
ExcluirBeijos
Por fim fazer um layout nem é tão difícil assim ^^
ResponderExcluirfashion em cores -.com
Exatamente Fran
Excluiré facil
Beijos
Muito util teu post, adorei ^^
ResponderExcluirObrigada Natalia
ExcluirBeijos
Amei o post Giselle, realmente é o que toda blogueira precisa aprender! Gostei bastante.
ResponderExcluirAh e muito obrigada pela visita no Confidence(Garotas em palavras)! Espero que goste do blog, vem muitas novidades por aí :D
Inclusive, tem texto novo viu? O título é: Pra que amar se temos sorvete? Dá uma passadinha lá, tenho certeza de que vai gostar!
Beijos linda, Lindo blog <3
Concordo, é bem facil e seria legal se todas souvbessem ne
ExcluirBeijos, vou la ver logo
Adorei o post, arrumei tudinho ! >.< Só um probleminha, e a foto ? Como faz ? Como coloco ?
ResponderExcluirOi Giselle! Tudo bem?
ResponderExcluirAdorei seu post, ficou muito bom! Meu blog vai fazer 1 ano semana que vem e vi que ainda tenho muitas coisas a aprender quanto ao layout e outras funções!
Gostaria de saber como você fez para colocar os ícones das redes sociais logo abaixo da sua foto e descrição de perfil.
Agradeço desde já! Beijinhos e muito sucesso com o blog.
Bárbara
http://barbarapereiraa.blogspot.com.br
Barbara, obrigada pelo carinho linda.
ResponderExcluirEntão, a foto de perfil está em um gadget e os icones estão em um gadget separado. Foi apenas isso que eu fiz, confesso que quando fiz até pensei que estavam muito distantes um do outro rs.
Beijos linda
Deixe um recadinho sobre o blog. Obrigada!