Como criei este layout

14:51Denny Baptista

Photo credit: Theo Crazzolara Himbeere und Kirsche auf Tastatur via photopin (license)
Então, passei as últimas duas (três?) semanas mudando o layout do blog. Sempre que entro em alguma crise existencial (hahaha) ela se espelha no blog e eu acabo mudando o layout. Isso é bom para acordar meus conhecimentos de CSS e afins, hahaha... Bom, segue abaixo as mudanças que fiz. Aceito sugestões!


Plataforma do blog:
Blogger.

Tema base: 
Espetacular (cinza, o primeiro à esquerda da lista), Blogger.

Imagens:
Cabeçalho do blog: usei o Photoshop e o Corel Draw.
Perfil: Imagem tratada no app Vinci (download Android AQUI) e restante no Canva Online (AQUI).

Configurações de largura, cor de fundo e do texto:
Personalização feita pelo próprio Blogger.

Fontes:
- Título das postagens e gadgets: Raleway (disponível no Google Fonts, AQUI).
- Texto das postagens e gadgets: Roboto Condensed (disponível no Google Fonts, AQUI).
- Texto do Blockquote: Yellowtail (disponível no Google Fonts, AQUI).

Sistema de comentários:

Disqus e Facebook. O que me incomoda nos comentários nativos do Blogger é a impossibilidade de notificação de resposta. Muitas pessoas me fazem diversas perguntas via comentário. Eu posso responder o quanto eu quiser que, se for pelos comentários do Blogger, a única forma da pessoa saber se respondi ou não é voltando ao post e olhando novamente os comentários. Pelo Facebook, quando respondo, a pessoa recebe uma notificação da resposta. pelo Disqus, o mesmo acontece, mas anotificação vem por e-mail. Bem melhor, né?

Tutoriais utilizados:
A maioria das alterações eu já faço automaticamente, mas deixarei linkados aqui os posts que sei que funcionam neste tema e que já utilizei. Podem não funcionar com todos os tema base. Mas podem ajudar alguém que quer aprender a personalizar seu próprio layout.

- Utilização de fontes diferentes no blog, via Google Fonts: Blog Papo Garota.
- Links (comentários, marcadores e autor) abaixo do título do post: Blog Renata Massa (precisei fazer algumas alterações para funcionar certinho).
- Menu fixo no topo com ícones de redes sociais: Blog Renata Massa  (precisei fazer algumas alterações para funcionar certinho).
- Personalizando menu no topo com imagem e caixa de pesquisa: Blog Renata Massa (utilizei somente a parte referente à caixa de pesquisa, acrescentando ao código do tutorial anterior; modifiquei as imagens da barra de pesquisa - cor - e da lupa - utilizei outra; fiz alterações também para ajustar largura e afins).
- Box de comentários do Facebook e Disqus no Blogger: Blog Más que se yó?
- Postagens relacionadas: Blog Follow your Dreams (personalizei, mas o código funciona perfeitamente).
- Widget de Instagram no blog (novo): Blog Follow your Dreams.
- Personalizar o blockquote do blog: Site Fique Sabendo!
- Newsletter personalizada: Blog Follow your Dreams.
- Widget YouTube com vídeo e botão de se inscrever: Blog Follow your Dreams.
- Arquivo do Blogger em forma de calendário: Blog Follow your Dreams.
- Personalizar indicador de marcador: Blog Follow your Dreams.
- Botão de compartilhar: Blog Renata Massa (alterei as imagens e a composição do texto).
- Cabeçalho da largura total do blog: Blog Go Imagine.
- Adicionar formulário do Blogger a página estática: Site Mundo Blogger.
- Paginação numerada no blog: Blog Elaine Gaspareto.
- Likebox Facebook: Blog Deixei Florir.

Conforme eu for mexendo mais, atualizarei este post, ok? Mas por hora estou satisfeita. Se vocês tiverem ideia de algo bacana, ou acharem que falta algo, podem dar a dica.

Beijão!

Você pode gostar destes também

0 comentários

Se você deseja uma resposta a alguma pergunta específica, por gentileza use uma das opções abaixo:

- Deixe seu e-mail, pois o sistema de comentários do blogger não notifica quando respondo, e te responderei por e-mail;

- Envie sua pergunta pelo formulário de contato do blog, do lado direito e deixe seu e-mail para que eu lhe responda;

Beijão!

Formulário de contato