3 blogs para mudar o design do seu blog!

Hoje o post é rápido, mas irá ajudar e muito quem está procurando tutoriais que realmente funcionem no blogger. Não sei se todos sabem, mas tudo que sei hoje sobre html/css devo ao que aprendi na internet! Chega de lenga-lenga, let's go:

1. Mundo Blogger
O primeiro blog que eu aprendi a amar tanto quanto os meus ♥ Aprendi tudinho sobre a estrutura do blogger, pra que serve cada coisa, como mudar sem desconfigurar tudo... enfim, a base de como montar um layout com a programação do blogger. Sempre fica nos meus favoritos, caso eu esqueça algum código, vou lá olhar como é, pois tenho certeza que foi lá que aprendi. Ou se quero alguma coisa nova, procuro lá primeiro, pois sei que há grandes chances de achar e funcionar haha. Olhem tudinho!!

2. Cherry Bomb
Muitos tutoriais fofinhos e personalizações, é isso que o blog mais tem! Muito útil pra quem não entende de css, pois a Liah (dona do blog) ensina tutoriais que deixam o blog bem mais bonitinho. Infelizmente o blog acabou em abril desse ano :( Mas as dicas continuam lá, é só pesquisar!

3. Evelyn's Place
Quem nunca ouviu falar da Evelyn, deveria procurar conhecer. Ela foi a primeira designer web que me inspirou. Sabe quando você vê algo feito por alguém e pensa: "Um dia vou saber fazer isso". Pois é, agora eu sei, e não parece tão difícil quanto antes haha. Logo quando comecei com meu primeiro blog (que era de textos) aprendi muitos tutoriais em uma comunidade do orkut. Mas faltava a parte de gráficos, pra deixar o blog mais bonitinho. Naquela época eram poucos os blogs que disponibilizavam algum utilitário, e muitas coisas eu pegava de lá. Se você quer gifs, backgrounds, favicons, e coisas fofinhas pro seu blog, pode ir lá já!

Esses são os blogs bases, que me ajudaram e muito a construir meus blogs nesses 4 anos. Comecei visitando o da Evelyn que era o mais popular da época, e depois, pesquisando tutoriais no google, encontrei o Mundo Blogger. O Cherry Bomb não lembro bem como conheci, mas alguns tutoriais de lá foram fundamentais pra deixar meus blogs mais fofos ♥ É claro que existem vários outros blogs bons pra visitar e ler tutoriais, mas esses são os que eu não esqueço o nome, mesmo que não esteja nos favoritos hihi

Espero que eles ajudem vocês tanto quanto me ajudou. Vale a visita ein!

E não se esqueçam do velho amigo google que ajuda a encontrar qualquer blog escondidinho que tenha aquele tutorial que você procura.

Formulário de Contato do Blogger

Desde que comecei a vender layouts sempre quis colocar um formulário de contato no blog. Já tive alguns, que eram gerados através de sites, mas eu não gostava muito do jeito que eles chegavam no meu email. Também já tentei montar um através de códigos, mas a mensagem não era enviada... Enfim, queria um formulário simples e funcional.

Ontem me deparei com uma surpresa: Em Maio o blogger disponibilizou seu próprio formulário de contato! Testei e funciona super bem. Então hoje, vou ensinar 2 maneiras de colocar ele no seu blog: A primeira é a mais simples, e a segunda é a melhor! Mas atenção: Antes de começar as alterações, escolha onde quer que fique seu formulário e só faça um dos tutoriais.

Tutorial: Perfil + Redes Sociais

Depois que fiz meu primeiro layout free, divulguei em alguns lugares... No grupo do Depois dos Quinze ganhei muitos elogios, e até algumas garotas já estão usando! Além disso, em um dos comentários, me perguntaram como eu fazia o perfil com links das redes sociais em icons. Como não vejo problema em dividir códigos com ninguém (meu problema é a explicação), resolvi fazer o primeiro tutorial aqui do blog!

Para ilustrar o que eu estou fazendo, irei utilizar nos exemplos o meu perfil!

O código:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="LINK DA IMAGEM AQUI" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">SEU PERFIL AQUI</span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a><a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a></div>

O que está em Vermelho: Você coloca o link da sua imagem de perfil.
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FVkl9iTcETjlUGrMZEy_xMs9lem6LX64Glc76Hq4hXVh2ehvC0JjAYFBXZmMS-jo_LR6mguiXciJDpF4ZwDCHZ4gYcNPeCDZb_TPZk4bSd8afcW_9x9-uWVBUPelK1aQmCmtKhppb3z6/s1600/sono.png

O que está em Itálico: É a fonte utilizada para a descrição do seu perfil, você pode altera-la.
Ex: Utilizei a Georgia.

O que está em Azul: Nesse local você escreve o seu "quem sou eu".
Ex: Maryana, 18 anos, blogueira...

O que está em Verde:
1. SEU EMAIL (você coloca o seu e-mail)
Ex: maryanasales@live.com

2. IMAGEM DO EMAIL (aqui é que vai o link do icon que você vai usar)
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx026lVfC3IPUu9OVhyphenhyphenq4SRiawv5MgM_DHt6EXawO2PlVlZP4swaDsoPJ6-gp8m6jvZjJmld6brSXHKexkW4Iwm-f6Zuf-oLlorK-umCWmGyDnbLaUmrgs7hfWeivBGM1DsLa5i74vwUjk/s1600/email.png

PS: Se você não quer um icon que redirecione o seu e-mail é só retirar essa parte do código:
<a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a>

 O que está em Rosa:
1. LINK DA REDE SOCIAL (você coloca o seu link de uma rede social)
Ex: https://www.facebook.com/maryanasales

2. IMAGEM REDE SOCIAL (você coloca o link do icon que você quer usar pra essa rede social)
Ex:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ2JlTZ1Huo5Pw6Ni9jzvqEZEv4Xkp93Tlp7lSUxsvx9IB6Yavy0Ma-1_5G50N7eM2zB0gmsovsNY7sYEETALQQaWjEJQA5viYliNqW94gSr3IV9qd2azQ_CbXXccL3I_lU1PuzIUzdLI/s1600/face.png

PS: Para colocar mais icons de outras redes sociais é só adicionar ANTES da última </div> esse código:
<a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a>

Exemplo do código do meu perfil com e-mail, facebook, twitter, tumblr e youtube:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FVkl9iTcETjlUGrMZEy_xMs9lem6LX64Glc76Hq4hXVh2ehvC0JjAYFBXZmMS-jo_LR6mguiXciJDpF4ZwDCHZ4gYcNPeCDZb_TPZk4bSd8afcW_9x9-uWVBUPelK1aQmCmtKhppb3z6/s1600/sono.png" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">Maryana, 18 anos, blogueira... </span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:maryanasales@live.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx026lVfC3IPUu9OVhyphenhyphenq4SRiawv5MgM_DHt6EXawO2PlVlZP4swaDsoPJ6-gp8m6jvZjJmld6brSXHKexkW4Iwm-f6Zuf-oLlorK-umCWmGyDnbLaUmrgs7hfWeivBGM1DsLa5i74vwUjk/s1600/email.png" /></a><a href="https://www.facebook.com/maryanasales"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZ2JlTZ1Huo5Pw6Ni9jzvqEZEv4Xkp93Tlp7lSUxsvx9IB6Yavy0Ma-1_5G50N7eM2zB0gmsovsNY7sYEETALQQaWjEJQA5viYliNqW94gSr3IV9qd2azQ_CbXXccL3I_lU1PuzIUzdLI/s1600/face.png" /></a><a href="https://twitter.com/maryanasales"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueHQVciHpqtSx4_F8D4nQhrb6j5mk-0mYs6WdQkqG6nBqeuJcJ5JOnNtB8oXxQg-X-8GJE9FWcMCANWn_5zzMelg8Z4eLl5LgvISetNdmZYzLYKj2pTGAFJzrfwGafGqrdImcHCFGWk4H/s1600/twitter.png" /></a><a href="http://iniciodeinverno.tumblr.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfxPFzRDbvTeJ6Rs1yN_M9gPLhgVgxAU9tix3Ew6no0_dVUTnT2pG7KZdic-qWDa0MU9aHqiNGxCB8APCbxnwfogs1TRUX5jpU0jLEvRA0TksXolYSThN3DfIcnbTtnFPFl6ZRiZjgpj6/s1600/picons45.png" /></a><a href="http://www.youtube.com/user/videosdamary/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDtf1FpdlwCyQ1AD904PJmtt0OtIKB4iQ33-RCM_uL8e64AmBUzw8_5p3cxX__NNlo0_F4ErBnJGo8NaWJL8tfdWe7Tqc9sznE7EdA-EgOrOZghswVir0Sfalimr-8vXl-Z57sXQicwHx/s1600/yt.png" /></a></div>

Instalando:
Painel do Blogger > Layout > Adicionar um Gadget > HTML/JavaScript
No campo conteúdo, você adiciona o código completo.
Salve e posicione onde quiser no seu layout!

Dicas:
Para seu perfil ficar mais fofinho, edite a imagem antes de colocar. Uma ideia é colocar borda, ou transforma-la em "Polaroid".
Os icons que eu normalmente uso, encontro aqui.

Espero que entendam o tutorial, eu não sou muito boa com explicações! Qualquer dúvida deixe nos comentários ou no meu Ask.