Layout Clean Free com menu responsivo para Blogger

abril 17, 2016


Olá pessoal. Esse template foi desenvolvido pelo blog Deixei Florir. Ele tem um layout bem clean, ideal pra quem quer um blog mais limpo, sem muitas cores. Mesmo sendo simples, ele é muito funcional e 100% personalizável. 

O que o layout contém

✓  Menu dropdown responsivo para celular, tablet e afins
✓  Fontes personalizadas
✓  Postagem recentes no topo ( 4 caixas)
 ✓ Sidebar personalizada (primeiro e ultimo gadget transparentes)
 ✓ Marcadores em nuvem coloridos
 ✓ Formulário de contato
 ✓  Caixa de pesquisa
 ✓  Data da postagem personalizada
 ✓  Balão de comentários no rodapé da postagem
 ✓  Botões de compartilhamento personalizados ( 4 botões)
 ✓  Área de postagem personalizada com tamanho grande (acima de 700px)
 ✓  Fotos ocupam 100% da largura da coluna de postagem
 ✓  Blockquote personalizado
 ✓  Postagens relacionadas no rodapé da postagem ( 3 caixas)
 ✓  Comentários personalizados
 ✓  Comentários do facebook instalados
 ✓  Rodapé dividido em 2 colunas

// Todos os itens acima citados são personalizáveis. É fácil e já está sinalizado no próprio código CSS o que vocês podem e onde devem mudar. Clique no titulo da postagem para ver o efeito hover, o titulo do blog também muda de cor quando você abre a postagem para comentar por exemplo. Para inserir o gadget com o menu de postagens recentes clique aqui.

Como ajusta a data dentro da bandeirinha? Vá até o painel do blog >> Configurações >> idioma e formatação >> formato da data. Coloque só o números ex: 07/03/2016

Como deixar os marcadores coloridos ? Edite o seu gadget de marcadores e marque a opção "cloud", se você deixar marcado a opção "lista" as tags não vão aparecer.

Como alterar a cor de fundo do blog ?  apert ctrl + F para facilitar a pesquisa e procure por  /*fundo do blog*/  e substitua o código por outra cor que desejar. Aqui nesse site tem uma tabela com umas 400 cores, basta copiar o código e colar no lugar de #F5F5F5

Como colocar uma imagem no fundo do blog ? Procure pelo mesmo trecho citado ai em cima e no lugar de #F5F5F5 cole isso aqui
url ( aqui dentro você coloca o endereço da imagem) repeat; 
Como trocar a cor do menu no topo do blog ? aperte ctrl + F  e procure por /*-----Responsive Drop Down Menu ----*/ 
altere as cores
#menu{
background: #333;      cor do fundo
color: #FFF;       cor da letra
Não apague o ponto e virgula no final e nem deixe repetido se não vai dar erro.

Como colocar o perfil da blogueira (o) ?
Para usar uma foto use essa sequência aqui: <img border="0" src="LINK DA SUA FOTO AQUI" height="280" width="280"/>  Abaixo disso você escreve a sua biografia ou qualquer outra coisa relacionada a você que considere importante. Depois é só salvar.

Como colocar links no menu no topo do blog ?
Crie páginas estáticas e publique, feito isso abra cada uma delas e copie o link no navegador. Depois vá até o painel do blogger>> modelo >> editar html

Exemplo 1 :
http://www.deixeiflorir.com.br/p/o-blog.html esse é o endereço da minha página de dúvidas sobre o blog
Exemplo 2:
http://www.deixeiflorir.com.br/search/label/Livros esse é o endereço da minha categoria de Livros
Copie os links com o endereço do SEU BLOG e cole no local indicado na imagem abaixo, especificamente onde está escrito LINK AQUI.




Obs: Acho que nem preciso gastar o meu latim aqui pra dizer que e expressamente PROIBIDO copiar esse layout e reproduzir por ai, dizer que foi você quem fez e blá blá né ? Por favor gente, dá trabalho fazer isso, colaborem. Se você não quer dar crédito ao trabalho de uma pessoa, então faça você mesmo. Se você precisa de outra pessoa, seja gentil e ajude a divulgar o trabalho, isso pode não significar nada pra você, mas é muita coisa pra mim.

 Visualizar                                     Baixar 

Por favor pessoal, leiam as instruções de uso e dicas de personalização lá no modelo online, lá eu tiro váaaaarias dúvidas sobre como editar o layout e problemas comuns na instalação. 
 

Compartilhe esse post:

  1. Oi, tudo bom? Adorei esse template, porém quando vou baixar, manda instalar o FlyPlayer e o AVG interpreta como ameaça. Como faço para baixar de outra maneira? Beijos

    ResponderExcluir
  2. Oi Natália, o 4shared tem essas propagandas mesmo, é chato, estou procurando outra forma de hospedar os layouts. Mas você precisa fazer assim, entra primeiro no 4shared, ele vai pedir uma conta, você entra com o facebook, e já fica logada. Ai você click no link ai em cima pra baixar, não clique nas partes que está escrito em azul download now, ou só donwload. Você precisa clicar no botão logo abaixo do link, aquele que tem uma nuvenzinha dentro, espere os 20 segundos e ele vai baixar sozinho. Se em todo caso não der certo, deixe aqui seu email que eu te envio em uma pasta zipada. Qualquer d´vida eu estou aqui. Beijinhos.

    ResponderExcluir
  3. Oi, tudo bem ? Adorei esse template e já estou usando.Beijoos

    ResponderExcluir
  4. Oi lindona, super amei o template, porém não consigo mudar o menu, nem o plano de fundo :(

    ResponderExcluir
    Respostas
    1. Adriana eu deixei umas explicações novas lá no post incial do blog pra ajudar você a trocar a cor e a imagem de fundo e do menu. Se você ainda tiver com qualquer duvida, é só deixar aqui tá ?

      Excluir
    2. Ameei, conseguir mudar o fundo e fazer alterações no menu, só não conseguir os posts recentes :(

      Excluir
    3. Uai Adriana, por que será ? Você seguiu todos os passos ? O gadget também só vai aparecer se você já tiver feito alguma postagem e marcado com alguma tag, você também precisa ver se o seu feed está ativo. Pra isso vá até o painel do seu blogger depois em configurações>> Outro >> feed de site >> permitir feed de blog e marque a opção completa. Outra coisa, você precisa colar o gadget logo abaixo do cabeçalho que tá escrito " header". Tenta pra ver se funciona. Deixa o link do seu blog aqui nos comentários pra eu dar uma olhada. Qualquer dúvida pergunte aqui ok ?

      Excluir
  5. Olá, amei o template e já vou usar porém a data está passando por cima do menu

    ResponderExcluir
    Respostas
    1. Gabriela o código já foi atualizado e ele tá funcionando normalmente. Beijo.

      Excluir
  6. Olá, amei o template e já vou usar porém a data está passando por cima do menu

    ResponderExcluir
  7. Amei mais nao consegui colocar os nomes no menu me manda o link da postagem que vc ensinou pois nao achei

    ResponderExcluir
  8. Nathi, olha só. É bem simples, você entra no HTML do blog e procura por logo abaixo disso vai estar indicado onde você deve colocar os nomes e o link da sua categoria ou página. Segue esse tutorial aqui, mas apenas siga os passos, não precisa colocar mais nenhum código no blog porque já está instalado no layout que você baixou.

    http://www.deixeiflorir.com.br/2016/02/menu-responsivo-dropdonw-para-blogger.html

    qualquer dúvida volte aqui ok ?

    ResponderExcluir
  9. Olá!!! Gostaria muito de usar esse template porém, as imagens não ficam com o tamanho total do post não né? :( Aliás, ficam mais algumas saem distorcidas. Exemplo: Na parte principal do post eu uso imagens grandes e que podem ocupar todo o espaço do post, porém, na assinatura da postagem quero colocar uma imagem pequenininha em forma de beijo e ai ela fica gigantesca. Tem como ajeitar isso.
    Se sim, fala pra gente!!! Super ansiosa, amei esse lay!!
    Bjos <3

    ResponderExcluir
    Respostas
    1. Oi Grace, tem como sim, se você não quiser que as imagens fiquem grandes ou ocupem toda a largura da folha de postagem vai ser preciso alterar um pedacinho do código html. Procure por "POST1" e apague tudo o que corresponde aquele trecho. No código já vai estar escrito o que significa, é fácil de achar. Isso já vai resolver o problema. Só que, as imagens não vão mais ocupar a largura total do post, pra isso você vai precisar usar imagens maiores, acima de 600px, mas isso não é problema, geralmente as fotos originais da câmera são superiores a 1500px. Qualquer dúvida deixe aqui nos comments. Beijo!

      Excluir
  10. Oi! Não estou conseguindo ajustar as categorias. podem me ajudar? http://www.bemfemininablog.com.br/

    ResponderExcluir
    Respostas
    1. Oi Ana, olha só, se for as categorias dentro do menu lá no topo do blog, é bem simples de resolver. Você só precisa colar o link do seu marcador dentro do código html. Faça o seguinte, sabe quando você publica um post e marca ele com uma tag ? Então, eu entrei no seu blog e vi que elas ficam assim ó http://www.bemfemininablog.com.br/search/label/Moda. Você vai em painel do blog>> editar html>> e procure por "checkbox" de cara você já ver onde você precisa editar, basta colocar o nome da sua categoria e colar o link do seu marcador, assim toda vez que você publicar um post com o marcador moda por exemplo, ele vai aparecer lá. Tente ai, qualquer coisa deixe aqui nos comentários que eu respondo.

      Excluir
  11. Olá, primeiramente quero agradece -la por disponibilizar o template ..Eu estou editando ele ,em blog de testes , e está indo bem , só estou com um problema :A side bar ficou mais alta que o lado das postagens (main) , e eu não estou conseguindo ajustar ..

    ResponderExcluir
    Respostas
    1. Ela está maior porque o layout foi criado para imagens de perfil redonda e contando do primeiro gadget para o último ele fica um pouqinho maior. Mas basta você procurar por .sidebar .widget:first-child ou similar e alterar a distancia do topo
      margin-top:xxx; vá mudando até encaixar na altura que te agrada.

      Excluir
  12. Adorei sua iniciativa, e ainda mais esse layout. Muito lindo mesmo, vou favoritar aqui porque com certeza vou usar! BJS
    devaneiosdeinverno.blogspot.com.br

    ResponderExcluir
  13. ola. estou com duas dificuldades nesse template. Nao consigo add os posts recentes. Pode me explicar com mais detalhes, pois sou leiga.Outra coisa, tem coomo redirecionar uma categoria para um link externo ??? Tipo, quando clicar em uma categoria ele vai redirecionar para outro site.

    ResponderExcluir
    Respostas
    1. Camila, os posts recentes precisam ser adicionados em um gadget do tipo HTML/JavaScript no painel do blog na guia layout. Eu testei o código hoje e ele tá funcionando normalmente, siga os passos nesse tutorial aqui ele está bem explicado não tem como errar e é o mais detalhado que eu consigo mostrar >> http://www.deixeiflorir.com.br/2015/09/postagens-recentes-em-miniatura-abaixo.html
      Quanto as categorias é possível sim, você pode colocar o link que você quiser é só copiar e colar no lugar certo. Você precisa ir até o painel do blogger, depois em editar html e procurar por "checkbox" sem as aspas, logo abaixo disso você já vai ver onde colar os links, depois salve pronto.

      Excluir
  14. Olá gostaria muito de usar seu layout , posso ?
    Claro , sem retirar seus créditos .
    Bjoos...

    ResponderExcluir
  15. Mariely mesmo colocando tudo certinho, não estou conseguindo colocar uma imagem de fundo. tem algum outro modo para colocar?

    ResponderExcluir
  16. Laísa você pode alterar pelo painel de controle na guia personalizar, lá você vai encontrar as imagens disponíveis pelo próprio blogger ou alguma outra que você quiser colocar pelo desktop do seu pc. Mas, sinceramente não entendi porque não deu certo. Você verificou se no final da linha do código o ponto e virgula estava lá ? Sem ele aquela linha do código não funciona. Tente mais uma vez usando essa sequência aqui: background:url("imagem aqui dentro") repeat;. Beijinho.

    ResponderExcluir
  17. Não consigo mudar as fontes do blog, como faço? :/

    ResponderExcluir
  18. Mari, eu to usando o layout mas as fotos não ficam do tamanho do post. já tentei por foto grande, pequena, já tentei alterar no código mas também não vai. tem algum tamanho de imagem indicado? algum código pra alterar?

    abraços, www.oquefaltou.blogspot.com.br

    ResponderExcluir
  19. Amei o layout, é muito lindo...
    Estou usando. <3

    ResponderExcluir
  20. flor, obrigada por disponibilizar o template!!! estou amando mas tenho dificuldades!!! a parte do sobre a blogueira não tem </3
    sumiu !
    tem como me ajudar?
    larasraquel.blogspot

    ResponderExcluir
    Respostas
    1. Lara, a primeira caixa da coluna lateral é onde você vai colocar seu perfil. Editei o post e coloquei um exemplo, da uma olhadinha lá em cima pra facilitar. Beijo!

      Excluir
    2. ah sim, obrigada ♥
      Mas a sequencia não está abrindo para mim !

      Excluir
    3. Lara minha flor, mil desculpas, acho que deixei o html aberto e ele não apareceu no post. Agora acho que tá ok.

      Excluir
  21. Olá adorei o layout. Mas estou tendo problemas para colocar a imagem em cima da descrição "quem sou eu?". Poderia me ajudar? Obrigada, beijos.

    ResponderExcluir
    Respostas
    1. Isadora, no final do post ai em cima tem um exemplo de como colocar a imagem. Você precisa ter ela em algum lugar na web. Eu por exemplo uso o meu tumblr pra isso, mas você pode usar também os post do blog. Crie um postagem e deixa ela em modo de rascunho, ai você faz um up da sua foto de perfil no post, clica com o mouse direito e copia o link da imagem. Depois você cola esse link dentro do código que eu postei lá em cima no post e coloca tudo dentro do Gadget de perfil. É só isso, não tem erro. O texto você escreve abaixo daquele código. Volte aqui se não conseguir. Beijo!

      Excluir
    2. Muito obrigada flor <3 tenho mais uma duvida hahaha o menu não esta funcionando, criei as paginas porém quando clico no menu diz que a página não existe. Poderia me ajudar?

      Excluir
    3. Você precisa criar as páginas estáticas e publicar. Feito isso abra as páginas e copie o link que aparecer na barra do navegador. Exemplo, minha página de duvidas "sobre o blog" é assim: http://www.deixeiflorir.com.br/p/o-blog.html esse endereço você precisa colar lá no HTML do layout. Vou deixar um exemplo no final do post pra você entender com mais facilidade ok ?!

      Excluir
    4. Deu superrr certo. Muito obrigada flor. E adorei seu blog. Beijos <3

      Excluir
  22. Olá, tudo bem? Estou usando o layout, mas estou com problema no menu :( Ele fica deformado no celular e quando diminui o tamanho do navegador http://porrecultural.blogspot.com.br/ Meu bloguinho de teste para você ver. Se puder me ajudar, eu agradeço muito!!!

    ResponderExcluir
  23. Oi!
    Eu baixei esse layout para o meu blog.
    Mas preciso de uma ajudinha sua... Não consigo configurar o menu.
    Exemplo: Home- Leituras- Lançamentos- Parcerias- Contato- Faq
    como eu faço?
    Desde já obrigada pela atenção.
    Abraços.

    ResponderExcluir
    Respostas
    1. Oii. Vc deu uma olhadinha no post ai de cima ? Eu explico como editar os links no menu. Basta observar a imagem que vc vai conseguir configurar. Se ainda assim não conseguir, deixe aqui nos comentários sua dúvida que eu responderei com prazer!

      Excluir
    2. Oi! :)
      Sim, eu tinha lido. Mas não tinha entendido direto.
      Mas lendo novamente e com mais atenção consegui entender.
      Muito obrigada! <3
      Adorei seu blog e você é muito simpática. Vou acompanhar. :)
      Beijos!

      Excluir
    3. Imagina, é um prazer ajudar. Visitei seu blog e já estou acompanhando. Só recoendo que vc ajuste a data dentro da bandeirinha. Use o que é só os números 31/01/2017 ou esse aqui 31 janeiro 2017. Esse ultimo é o mais adequado. Vc faz essa alteração no painel de controle do blogger em configurações - idioma e formatação - formato da data. Beijo!

      Excluir
  24. Olá Gostei muito desse Layout, Estou baixando agora para o meu blog. Parabéns pelo lindo trabalho e pelo blog. Beijos :*

    ResponderExcluir
  25. Olá! Gostaria de utilizar esse layout no meu blog mas não estou conseguindo baixar. Tem como você me enviar em uma pasta zipada??
    Meu e-mail: blogtatitavares@gmail.com
    Grata!

    http://blogtatitavares.blogspot.com/

    ResponderExcluir
  26. Oi, não estou conseguindo baixar. Você poderia me enviar por email?
    daiane.lu@gmail.com

    ResponderExcluir
  27. Oii, tudo bem?
    POR FAVOR ME AJUDE!
    não consigo configurar a barra menu, onde fica (contato, blog....)
    queria mudar e não acho opção.

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. Ooi!
    Eu gostaria de saber se tem como centralizar a imagem do cabeçalho. Eu não quero deixar o titulo como texto e sim imagem, mas ele fica do lado direito da tela.
    O blog de teste é esse caso você precise dar uma olhada: https://kzmirosil.blogspot.com.br

    ResponderExcluir
  30. Oi

    Adorei seu layout e queria usá-lo, porém não sou muito fã de rosa, gostaria de trocar a cor dos detalhes em rosa. Tem como?

    Abs.

    ResponderExcluir
    Respostas
    1. Oii, obrigada. Olha tem como trocar sim. Você precisa identificar no código o que quer mudar, as cores são inseridas por códigos específicos por exemplo, a cor branca é FFF ou preto 000. O rosa do blog é criado pelo código "FF82AB" procure por isso dentro do código geral e troque pela cor que você quiser. Na internet tem uma tabela de cores com uma 1000. Bjo.

      Excluir
  31. Puxa, eu AMEI demais. Já estou usando no meu blog que reinaugura amanhã, dia 01. Fiz várias alterações, mas, não retirei os créditos, tudo bem?

    Muito lindo e, ainda por cima, responsivo. Você é incrível. Muito obrigada por compartilhar este maravilhoso trabalho! <3

    Caso tenha tempo, pode dar uma passadinha por lá a partir do dia 1 e deixar um comentário? Ficarei muito feliz. Beijo!

    Blog: www.estrambotices.blogspot.com

    ResponderExcluir
    Respostas
    1. Ah que lindo Bianca. Muito Obrigado por usar um layout meu. Esse ano tentarei trazer mais novidades para deixar o blog de vocês cada vez mais lindo. Pode deixar que irei te visitar sim <3

      Excluir
  32. Oi, tudo bem?

    Esse template é incrível, gostei demais, estou usando ele no meu blog, muito obrigada por disponibilizar.

    Te espero em meu blog!
    Beijinhos
    Blog | Facebook | Instagram

    ResponderExcluir
    Respostas
    1. Oiie Talyta, muito obrigado. Já vou ir lá te visitar <3

      Excluir
  33. Oieee... tenho uma duvida beem de iniciantes...
    Tenho o menu no blog. Criei uma página para cara "item" do menu e inseri o link de direcionamentol.
    Como faço para que o post fique dentro das categorias do menu? Eles estão apenas na página inicial.

    Obrigada por compartilhar seus conhecimentos conosco :)

    ResponderExcluir
  34. Este comentário foi removido pelo autor.

    ResponderExcluir
  35. Amei o Layout, porém no meu, não aparece os número para passa de páginas no final. Gostaria de saber como eu resolvo isso! Beijão!

    ResponderExcluir
    Respostas
    1. Oiie, então geralmente isso acontece quando o blog não está em modo publico, em blogs privados ele não aparece mesmo. Outra coisa importante é ver se o numero de páginas está configurado certinho, por exemplo, nesse modelo o número está configurado para 5 páginas, então vc precisa colocar esse valor no seu blog também. Vá em configurações da postagem e veja quantos posta esta configurado para aparecer na sua página inicial. Coloque "cinco.
      Beijo.

      Excluir
  36. o link não está funcionando, clico para baixar mas não baixa T.T

    ResponderExcluir
  37. Pessoal vejo que algumas pessoas não estão conseguindo baixar o layout, quem estiver com esse problema por favor, deixe o email aqui que eu envio.

    ResponderExcluir
  38. oi eu nao estou conseguindo baixar eu clico mas nao acontece nada! oque eu faço tem em outro site?

    ResponderExcluir