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!