12 abril 2016

Tema Base Responsivo - DIY Layout!


Oi gente, tudo bem? De última hora assim, resolvi fazer esse tema base para blogger pra vocês. Com ele, você poderá criar seu próprio layout como quiser! E é totalmente free.

Eu usei o nome DIY, porque VOCÊ vai fazer seu próprio layout, não, eu não vou te ensinar, só dar a base hahahaha. O melhor é que ele é responsivo, e vocês podem adaptar, personalizar, e é só seguir a lógica pra manter ele sempre responsivo! Aqui no post eu explico um pouco sobre como usar!

Só tem algumas regras.

1. Não retire meus créditos em hipótese alguma. 
2. Pode vender o layout com adaptações? Pode, desde que não retire meus créditos e seu cliente saiba que o tema base é meu. 
3. Posso fazer um layout free com o seu tema base? Pode, desde que não retire meus créditos.




*Download feito por Pay With a Tweet. 

Como instalar: 


Para instalar é só baixar, descompactar a pasta, abrir o arquivo no bloco de notas, copiar todo o código e colocar no blog. 

Como Usar: 

Nessa imagem eu tentei explicar o que é cada div que você encontrará no código, acho que isso poderá te ajudar. 

Tema base responsivo blogger free



Ou seja, pra alterar o jeito do título (Be The Reason) é só procurar por h3.post-title { e mudar os códigos que tem lá.

Responsivo


A parte responsiva está indicada no código.

@media screen and (min-width: 1400px) {

códigos

}

Todos esses códigos na parte responsiva, aparecerão em telas de até 1400px. Depois vai ter um código igual, mas em vez de 1400px, será 1200 (todos os códigos dentro dele, aparecerão em telas de até 1200px). Depois 900, e é a mesma coisa, para entender um pouco melhor, indico esse tutorial.

O Menu


Para o menu de 3 linhas (responsivo) funcionar, você precisa colocar esse código em um html/javascript:

<div id='nav'>

<ul>
<li><a href='/'>  Início </a></li>
<li><a href='/p/sobre.html'>  Sobre </a></li>
<li><a href='/p/contato.html'> Contato </a> </li>
<li><a href='/p/anuncie.html'>  Anuncie </a></li>
<li><a href='/p/blogroll.html'>  Blogroll </a></li>

</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu"><img src="http://i.imgur.com/wvad5ud.png"/></div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 900) {
$("#nav").removeAttr("style");
}
});
</script>



A parte azul é o link, e a parte roxa é o nome que aparecerá, apenas mude esses lugares. O CSS desse menu (a parte que você muda o estilo, cor, fonte etc) está no código do próprio layout.

Aqui no butlariz tenho diversos tutoriais que podem te ajudar a personalizar. Se tiver dúvidas ou problemas com o layout, envie um e-mail para: duvidasbutlariz@gmail.com

Não se esqueça de se inscrever na newsletter do blog, para receber novidades e ter acesso a conteúdo exclusivo! 

É isso, espero que gostem e usem bastante! Deixe um comentário dizendo o que achou, e dando um apoio moral hahaha, afinal fazer esse tema base, explicar tudo nesse post e disponibilizar não é fácil não! Beijos! 

Comente com o Facebook:

46 comentários:

  1. Larissa! Mulher, o quanto eu esperei por uma alma caridosa para fazer isso hahaha

    Obrigada, por ter liberado essa maravilha pra gente.

    Beijos!

    www.sonhosnabolsa.com

    ResponderExcluir
    Respostas
    1. Hahaha, eu que agradeço pelo carinho! Beijão.

      Excluir
  2. Que linda! Melhor do que ter o dom é compartilhar com outras pessoas. Parabéns por esse trabalho lindo Larissa! Um beijo.

    ResponderExcluir
    Respostas
    1. Obrigada por esse comentário, de verdade Vivian <3 Tenho uma facilidade absurda de aprender, e sei que muita gente não consegue, então vou ajudar o máximo que eu puder! Beijos <3

      Excluir
  3. Adorei o post, super explicadinho! <3

    ResponderExcluir
  4. Ameeeeeeeei Lari <3 Agora vou poder estudar e entender como funciona esse responsivo rs

    Beijos

    ResponderExcluir
    Respostas
    1. Sim sim, é só olhar o código, e ir testando! Tá super fácil haha

      Excluir
  5. Já estou personalizando ele, muito obrigada mesmooooo ♥

    ResponderExcluir
    Respostas
    1. Obaaa! Quando terminar me manda o link, quero ver como ficou!

      Excluir
  6. Lari, obrigada por compartilhar. A vontade que você tem de ajudar as pessoas é tão linda <333. Vou usar com certeza! E ainda vou treinando pra aprender a fazer meu próprio lay responsivo, porque assim não dá né?

    SUCESSSSO!♥♥

    ResponderExcluir
    Respostas
    1. Que comentário lindo <3 Treina sim, vai conseguir! haha, obrigada!

      Excluir
  7. Olá, Lariz. ♥ Tudo bem, sim. Acho muito legal que você use seus conhecimentos em HTML pra ajudar quem não tem tanto assim. A base é um amor e com suas explicações não tem erro. Amei e estou completamente apaixonada pelo seu cantinho.

    Carinhosamente, Jheni. Quinze Outonos

    ResponderExcluir
    Respostas
    1. Oi Jheni! Minha meta é ajudar mesmo <3 Estou me planejando pra toda quarta feira postar um tutorial ou dica! Fico muito feliz que tenha gostado e que goste tanto do meu blog <3 Beijos cheios de amor ♥

      Excluir
  8. Oi Lari, eu simplesmente amei quando vi! Estava precisando de uma ''base'' para fazer algo meu e está dando certo. Muito obrigada, viu?!

    Beijos!

    porfavorjulia.com

    ResponderExcluir
    Respostas
    1. Quando estiver pronto quero ver <333 Fico feiz que tenha gostado, e imagina, tô aqui pra ajudar <3

      Excluir
  9. Era isso que eu estava procurando! Muito obrigada por compartilhar conosco, já salvei no meu blog de testes e vou personalizar pra colocar no meu bloguito! <3

    ResponderExcluir
    Respostas
    1. Imagina Nanda <3 Quando colocar me avisa, que eu quero ver hein?

      Excluir
  10. Garota, você vai por céu! hahahaha Eu não conhecia seu blog, achei no rodapé de um blog que acompanho (o Por Favor, Júlia) e, sério, você merece todo o reconhecimento dessa blogosfera! Muito obrigada por se dedicar a ajudar aos outros que, assim como eu, não entende nada de html, mas que quer muito entender. Vou baixar e ir mudando devagarzinho, aprendendo passo por passo. hahaha <3

    www.domingodeinverno.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que lindaaaa! É esse tipo de comentário que me faz continuar cada vez mais <3 Minha intenção é ajudar o máximo que eu puder! Beijão ♥

      Excluir
  11. Lari, tu arrasou, vou usar para produzir meu novo layout! Beijos do Deivy.

    ResponderExcluir
    Respostas
    1. Uhuuuu, e quando fizer me mostra! Quero ver! Beijos <3

      Excluir
  12. Que maravilhoso! Eu nunca vi ninguém disponibilizar assim, pra gente editar. E você deixa até vender, que fofa!
    Adorei, vou tentar usar pra atualizar meu blog um dia (vou demorar muuuuito pra conseguir editar tudo) hahah
    Muito obrigada por compartilhar isso com a gente <3
    Beijos!
    Coisinhas Aleatórias

    ResponderExcluir
    Respostas
    1. Obrigada Mariana! Sim, deixo editar pra poderem fazer o que quiser no layout. E sobre vender, eu preferi permitir do que ter dor de cabeça kkkkkkkk. Quando fizer me mostra, vou adorar ver! Beijos <3

      Excluir
  13. Oi! Muito obrigada por partilhar isso, estava louca atrás de um assim. Só tenho uma duvida, não consigo trocar a imagem de fundo, que vem branca, entendo quase nada de códigos, você poderia me dizer como eu posso por uma imagem de fundo? Muito obrigada :)

    ResponderExcluir
    Respostas
    1. O fundo fica em body { , é logo no começo do código, dentro dele você vai encontrar isso: background-color: #fff; o #fff é a cor branca, pra mudar de cor é só mudar o código, pra colocar uma imagem, é só na linha de baixo colocar assim:

      background-image: url('linkdaimagem');

      Espero que consiga, beijos!

      Excluir
  14. Larissa, não conhecia seu blog e cheguei aqui por acaso, fui abrindo um monte de abas, enfim, caí aqui. Tem mais de um mês que busco uma base, ou uma explicação detalhada sobre layout responsivo. E basta cessar na procura que a gente encontra rsrs.

    Agora não vou dormir, né? Vou ver esse post explicadinho e obrigada por disponibilizar. Que vc seja grandemente abençoada.
    Beijos

    ResponderExcluir
    Respostas
    1. Oi Silvia, obrigada pelo comentário <3 Fico muito feliz que tenha gostado do meu blog, e muito feliz mesmo por poder ajudar! Depois me mostra o resultado viu? Espero ajudar muito mais ainda, se tiver sugestões de tutorias, é só me falar! Beijos <3

      Excluir
  15. Oi Larissa, eu não estou conseguindo baixar, fica dando erro.
    Você pode me enviar por e mail?
    contatofalagabi@gmail.com

    ResponderExcluir
  16. Olá, obrigada, sou meio devagar para entender essas coisas, mas vou pedir ajuda ao meu filho. Muito legal da sua parte!
    Bjs,
    http://contosdacabana.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu que agradeço Cidália! Se precisar, pode me pedir ajuda também. Qualquer coisa me manda mensagem lá na página Butlariz ♥ . Beijos!

      Excluir
  17. Que sonho, nem acredito!
    Grande trabalho!

    www.memoriasdeumaguerreira.com.br

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

    ResponderExcluir
  19. Lari! Amei esse tutorial! Como faço para colocar uma imagem de cabeçalho? para ela ocupar toda a extensão do blog? Te mandei um email também! ♥ beijos

    ResponderExcluir
  20. Gostei da sugestão
    Beijinhos
    CantinhoDaSofia
    Facebook
    Tem post novo todos os dias

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

    ResponderExcluir
  22. oiie ,temcomo voce me enviar por email? não consigo fazer o download!!
    por favor...

    analaurahonorato2014@gmail.com

    ResponderExcluir
  23. Que maximo amei, bom final de semana, obrigado pela visita.
    Blog: https://arrasandonobatomvermelho.blogspot.com.br/
    Canal:https://www.youtube.com/watch?v=DmO8csZDARM

    ResponderExcluir
  24. Laaariiz, que layooout lindooo. Poréem, deu um erirnho kk, acho que mexi em algo, os links ficam azul e sublilhado e o menu no topo ficou estranho, o que eu faço? Help meee
    Beijos lindoona

    To personalizand nesse blog: cooiisasdegarota.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada <333 eu encontrei o erro, é bem fácil, mas não sei se você vai conseguir entender, no html, logo no começo do código tem isso aqui:

      body {
      background: url("https://2.bp.blogspot.com/-VqN2WqSHPO4/WAYWDiMtyYI/AAAAAAAACzM/l0fxyjbFg8cPRiAnt_BuqeI32bRjgUYqQCLcB/s1600/Sem%2Bt%25C3%25ADtulo.png") no-repeat; }
      html {
      background: url("http://kaedo.com.br/wp-content/uploads/Background-Cinza-Quadriculado_mini-1.jpg") repeat; }
      }
      a {text-decoration: none; color:#000}

      A última linha é o a {...} esse é o código dos links. Ta vendo que na linha de cima tem um } e na linha de cima, você já tinha fechado o } ? Apaga o } da penúltima linha e vai dar certo.

      Ah, uma dica: Você colocou seu logo como background, não precisa. Vai em Layout no painel do blogger, naquela parte de adicionar gadgets, em Editar o Cabeçalho você pode fazer upload do seu logo. E deixa o papel de parede do blog em body { e não em html { .

      Espero que consiga entender kkkk beijos!

      Excluir
  25. AMEI AMEI AMEIIII LARI!
    EU CONSEGUI FAZER MEU LAYOUT, GRAÇAS AO SEUS TUTORIAIS E TUDO MAIS.
    OBRIGADAAA!

    http://floresnoluar.blogspot.com.br/

    ResponderExcluir
  26. Obrigada pelo carinho flor! Dá pra ver que é tudo feito com muito carinho.

    @elapensatambem

    ResponderExcluir
  27. Lariz, ameiii demais esse layout!! <3 Só estou com uma dificuldade: como deixa o icone do menu 3 linhas branco com o fundo preto? Sabe, queria deixar o menu preto com a fonte branca, me ajuda, linda!

    ResponderExcluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design