Oi gente!!! Tudo bom??? Espero que sim!!! Hoje eu vim ensinar como fazer seu propio layout!!! Se você anda querendo fazer uma reforminha em seu blog, ou criar seu primeiro layout!!! fique tranquila (tranquilo)!!! Vou mostrar o quanto é fácil fazer um layout legal!!!
Qual modelo escolher???
Acredite este é o maior erro de varias blogueiras (Confesso que cometi esse erro)!!! Normalmente as blogueiras iniciantes opitam por um modelo mais bonitinho!!! Mas saiba você vai editar o modelo depois, por isso não ligue para a feiura e escolha um modelo viagem, pois é o mais usado na blogosfera, e se encontra varios tutoriais para edita-lo, além de ser mais profissional (depois de editado)
Então clique em Modelo, e depois em Personalizar.
Agora clique em Modelos, e depois em Viagem, agora temos quatro opções diferentes de modelo, qual escolher??? Bem, não importa qual você escolher a maioria dos tutoriais para o modelo viagem dá certo para todos os quatro!!! Mas eu recomendo que escolha o roxinho!!!
Como deixa-lo bonito???
Agora vamos tirar essa cara horrendua desse layout, e deixa-lo bonito!!!
Vamos começar alterando o plano de fundo , clique em Remover imagem, o fundo irá ficar branco!!!
Agora clique nesse triangulo, depois em Fazer upload da imagem, e depois em Browse.. quando terminar o envio da imagem clique em Concluído.
Agora vamos mudar os gadgets da sidebar!!! Primeiro vou explicar um detalhe horrivel nesse modelo!!! Tá vendo este marrom no fundo do gadget!!! Quando você trocar a cor do gadget, a cor adicionada irá ficar sobre esse marrom!!!
Se não entendeu vou explicar melhor, olha só como fica o gadget ao colocarmos no fundo um azul clarinho!!! O azul se mistura com o marrom!!!
Vamos tirar esse efeito??? É muito fácil, então vamos lá!!! Clique em Modelo e depois em Editar HTML.
Agora dê um Ctrl + F, e se está usando a coluna do lado direito, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
E se está usando a coluna do esquerdo procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Logo abaixo desse código irá aparecer:
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Apague e no lugar coloque:
background: transparent;
O footer também tem o efeito horrenduo!!!
Para tira-lo é sor ir novamentr no Html do blog, e procurar por:
.footer-inner {background: transparent $(footer.background.gradient) repeat scroll top center;
}
Agora, apague a parte destacada!!!
Vamos editar agora o menu, que também é horrivel!!! Eu achei um tutorial na internet bem interessante para ver clique aki.
Agora, vamos lá em personalizar, novamente para deixar tudo bem bonitinho!!!
Agora clique em avançado!!!
Agora edite a cor de toda as partes do layout, deixando-o lindo!!!!
Como deixar esse layout + personalizado?
Se você fez tudo certinho, o layout já deve estar lindinho mas dá para deixar ele bem mais bonito!!! Então vamos lá?
Colocando um cabeçalho!!!
Existem varios modos de colocar um cabeçalho, no blog!!! vou deixar alguns tutoriais bem legais!!
Navbar personalizada!!!
Sendo sincera eu não gosto da navbar!!!! Vamos tira-la totalmente ou só deixar que apareça quando se passa o mouse?
Gadgets Personalizados
Vamos deixar os gadgets bem fofinhos??? Vou deixar o link de alguns tutoriais!!!
Personalize os títulos dos gadgets
Personalize os títulos dos gadgets
Rodapé com tres gadgets
Rodapé de creditos personalizado
Área dos comentarios personalizada
Slides:
Gadgets de Categorias:
Vamos deixar o gadget de categorias bem legal???
Seguir por e-mail personalizado
O seguir por e-mail normal, está em inglês e é bem feinho!!! Vamos consertar?
Mais detalhes!!!
+ Dicas
Vou dar agora algumas dicas para quem tem medo de mexer no html do seu blog, e também ajudar em algumas coisas!!!
Dica 1:
Antes de mexer no seu html, faça um backup, ou seja salve seu layout em seu computador!!! É só clicar em Fazer Backup/Restaurar:
Irá aparecer essa janela clique em Fazer dowload do modelo completo, faça o download, e para enviar seu modelo clique em Browse... e envie o layout.
Dica 2:
Antes de mexer no seu html, faça um backup, ou seja salve seu layout em seu computador!!! É só clicar em Fazer Backup/Restaurar:
Irá aparecer essa janela clique em Fazer dowload do modelo completo, faça o download, e para enviar seu modelo clique em Browse... e envie o layout.
Dica 2:
Se vc tem medo de fazer um estrago no seu blog, ou não quer deix-lo em reforma!!! Você pode usar um blog abandonado ou um blog de teste para fazer o layout, quando terminar, é só ir em modelo editar html
Marcar a Caixinha Expandir modelos de widgets, copiar todo o codigo.
Depois entre no seu blog etre nas htm, só que ao invés de copiar os html, apague tudo e cole, o que você tinha copiado do blog de testes!
Resumindo: Faça seu layout no blog de testes, e depois copie as html, e cole no blog que usa!!!
Dica 3:
Antes de selvar seu layout clique em Visualizar, irá abrir uma nova janela, se estiver tudo ok clique em Salvar Modelo, mas se não estiver clique em Limpar edições.
Dica 4:
A maioria das pessoas tem dificuldade em encontrar códigos em html de cores, então vou dar uma dica para vc escolher qualquer cor em qualquer tom!!! Entre no seu designer de modelo, e depois em personalisar!!! Ao clicar em avançado irá aparecer essa janelinha com as cores!!!
Observe que o código da cor escolhida fica no quadrinho!!!! Ou seja vc pode escolher qualquer tom que quiser, e terá o código!!! Tão simples, e a maioria das pessoas tem essa dificuldade!!! (Eu já tive mas foi só eu dar uma olhadinha que eu descobri isso)
Avisos:
♥ Recebi um Selinho e o postarei domingo!!!!
♥ Qualquer duvida comente!!!
♥ Espero que o tutorial seja útil!!!
♥ Estou pensando em fazer layouts free!!! O que acham???
♥ Se gostou siga o blog!!!
♥ Então é isso!!!! Mal vejo a hora de fazer o proximo post!!! Estou muito feliz com minhas 29 seguidoras!!! ♥
Adorei o blog,flor.
ResponderExcluirTutorial muito interessante.
vou utilizar nos meus futuros layouts.
Ja estou seguindo seu blog.
Visita e retribui??
www.garotaousada.com
Que bom que gostou vou visitar!!!
ResponderExcluirMuito bom o tuto! Com certeza irá ajudar muita gente ^^
ResponderExcluir\õ seguindo!
- BLOG Tentando Esquecer
- HEY! Curta a nossa FANPAGE
Espero que ajude!!!!
ResponderExcluirObrigada por Seguir!!!
Parabéns pelo tutorial, ficou tudo bem organizado e explicado ^^
ResponderExcluirhttp://bugigangazdanet.blogspot.com.br/
Seguindo seu blog
Qeu bom que gostou flor!!!!
ExcluirAmei as dicas e o seu blog é muito lindo! Parabéns, Gaby!
ResponderExcluirGuid Monteiro.
http://depoisde15primaveras.blogspot.com.br/
Que bom que gostou!!! *_*
ExcluirGaby o meu gadget de sidebar ficou transparente e naum consigo decha-lo da cor branca
ResponderExcluirOla o primeiro cod q vc pedi para procurar no html eu nao acho... fica em vermelho ou seja não tem
ResponderExcluirSeu tutorial com certeza me ajudou muito então eu queria lhe agradecer pela ajuda!Um beijo e não deixa de dar uma passadinha lá depois,eu ainda não postei quase nada porque estava meia enrolada com layout personalizado e etc.A minha situação tava tão ruim com relação a editores para criar um template que eu tava tendo que criar tudo no Paint deu um trabalhão Valeu pela ajuda!O nome do meu blog é New Day, o link é esse AQUI>> http://newday773-2.blogspot.com.br/
ResponderExcluirMuito obg, seu tutorial é muito bom, obg pela ajuda! Beijo e muito sucesso pra vc!
ResponderExcluirOi eu tenho uma pegunta... é proibido criar layout free com os tutoriais da net?
ResponderExcluirOlha, não sou ela, mais se você pegar um layout free e personaliza-lo para VOCÊ, não é proibido, mais se você pegar um layout free, personaliza-lo e disponibilizar ele em qualquer site ou até mesmo no seu blog, é proibido. Mais se quiser pegar um e usar como base para layouts que você fizer para disponibilizar no seu blog pergunte ao dono do layout primeiro! Espero ter ajudado!
Excluirhttp://chiclet3pink.blogspot.com.br/