Sites úteis pra quem quer mudar o layout

notebook desktop cadernos

Enquanto atualizava a aparência aqui do blog acabei fazendo muitas pesquisas (como sempre) que me ajudaram a resolver os problemas que iam surgindo. Como eu só sei o básico sobre HTML e CSS, e tudo que eu aprendo é fuçando e testando, muita coisa que eu quero fazer acaba não dando certo no fim das contas. Aí o bom e velho google salva minha vida, e talvez agora salve a vida de vocês também.

Essas ferramentas podem ajudar bastante em algumas mudanças no layout, ou só facilitar a vida em um pequeno detalhe, mas independente do grau de utilidade é sempre legal conhecer.

01. LinkWithin
www.linkwithin.com

É o sistema de postagens relacionadas mais utilizado pelos blogs que conheço, são esses quadradinhos que aparecem no rodapé do post com outras indicações de leitura, sabe? Pra usar basta adicionar o link do seu blog, sua plataforma, seu email e quantos posts relacionados você quer que apareça, aqui no blog uso 5. O site vai gerar um código e explica como você pode usá-lo.
Ah, e dá pra personalizar a aparência com CSS. Tem um post muito bom no blog da Elaine Gaspareto que fornece os códigos pra personalizar e já vêm com uma explicaçãozinha.
Como a ferramenta é bem popular, muitos de vocês já devem conhecer/usar, mas não custa nada lembrar né?

02. Cufón
cufon.shoqolate.com

Pra conseguir usar no título das postagens uma fonte que eu tinha instalada no meu computador, fiz uso do Cufón. Com esse site aquele limite de fontes tahoma-verdana-arial-etc se perde, qualquer fonte que você tenha baixada pode ser usada e vai estar ali, linda e visível pra todo mundo que acessar seu blog.
É um pouquinho complicado explicar como funciona de maneira rápida, por isso vou deixar o link de um tutorial bem detalhado pra vocês.

03. Google Fonts
www.google.com/fonts

Mais uma dica de fontes personalizadas! Com o Google Fonts as fontes não precisam nem estar no seu computador, é um estoque próprio imenso onde eles disponibilizam um código que você pode usar no CSS do blog. Estão separadas em categorias e o estilo que eu mais gosto é o handwriting. Fácil né? Agora não tem desculpa nenhuma pra usar comic sans.

04. Screenfly
quirktools.com/screenfly

Não tem decepção maior pra um amador em HTML e CSS como eu ver que seu blog lindo e maravilhoso fica completamente diferente no computador de outra pessoa. Além de não ser visualmente agradável, isso pode aumentar muito as taxas de rejeição do blog, já que muita gente fecha a página de cara se tem um pedaço do layout faltando ou se as coisas não estão tão alinhadas quanto deveriam. E é por isso que o Screenfly é tão útil, com ele você pode ver como o seu blog fica em cada resolução de tela e em cada aparelho, desde notebooks e tablets até celulares e televisões. É só colocar seu link, clicar em go e aproveitar.

05. Full page screen capture
chrome.google.com/webstore/detail/full-page-screen-capture

Talvez essa extensão do Google Chrome funcione melhor pra quem trabalha com web design, mas também serve pra quem só quer mostrar seu novo layout na íntegra pra alguém. Com a ferramenta conseguimos tirar printscreen da página toda, o que é bem legal pra blogs que não mostram todo o conteúdo principal do layout logo de cara, necessitando rolar um pouco a página pra baixo (que é o caso aqui do blog).

06. Searchbar
www.bloggerenciado.com.br/criar-caixa-de-pesquisa-para-blog
www.linhadecodigo.com.br/artigo/3517/
www.html5xcss3.com/p/css3-search-box-tutorials

Eu mantenho desde o primeiro modelo do blog a mesma caixa de pesquisas, acho muito importante que qualquer site tenha essa opção porque, falando como leitora, é realmente muito frustrante querer pesquisar algo em uma página e não ter como. Trouxe pra vocês 20 modelos de caixas de pesquisa, com os códigos CSS para personalizar, distribuídos em três sites diferentes.

07. NounProject
thenounproject.com

Site repleto de ícones de todos os tipos que podem ser usados no blog. Eu dei uma mexida nos meus ícones de redes sociais, que ficam aqui na barra lateral do blog, mas dá pra pegar parecidos, ou até mesmo melhores, no NounProject, assim como ícones para as categorias do seu blog ou menus principais (página inicial, contato, sobre e etc).

E aí, gostaram das dicas? Post digno de ser salvo nos favoritos ou compartilhado com outros bloggers né? Hahah. Acho alguns desses também servem pra quem curte ou estuda design.

Se tiverem mais alguma sugestão de site ou app útil pra dar um up no layout deixem nos comentários, vou adorar saber!



20 comentários:

  1. Comecei hoje a usar o linkwithin. É normal ainda não aparecer nenhum post nessa parte? Obrigada :)

    Isa,
    http://isamirtilo.blogspot.pt/

    ResponderExcluir
  2. Amei as dicas! Já coloquei nos meus favoritos para em breve utilizá-las.
    Parabéns mesmo!

    http://christinacorrea.blogspot.com.br/

    ResponderExcluir
  3. Adorei o post, algumas dessas dicas já conhecia mas outras foram descobertas, obrigada :)

    Sorriso Espontâneo

    ResponderExcluir
  4. Estava mesmo precisando de um post desses, muito obrigada. Já adicionei seu post aos favoritos e com certeza vai aparecer no meu próximo post de links favoritos da semana ahaha Obrigada pelas dicas, amei de verdade <3

    http://nostalgiacinza.blogspot.com.br/

    ResponderExcluir
  5. Nossa que post importantíssimo! Amei suas dicas, principalmente esse site das fontes que eu ainda não conhecia, super útil! muito obrigada!
    www.nahboa.com

    ResponderExcluir
  6. Amei seu post, amei seu blog!
    você é muito fofa e seu layout tá lindo, tenho que seguir pra ontem kk :)

    www.antesdaprimavera.com.br

    ResponderExcluir
  7. Amei esse post, amei o blog!
    Muito bom o seu layout e o jeito que você escreve :)
    tenho que te seguir pra ontem kk bjs

    www.antesdaprimavera.com.br

    ResponderExcluir
  8. Sites muito bons *-*
    Não conhecia eles!!! Obrigada pelo carinho la no Chá <3

    www.chaeamor.com

    ResponderExcluir
  9. Oiii... eu adorei as suas dicas.. as 3 ultimas vou pesquisar pra usar nno lay do meu blog... megabeijos!!! Ja estou te acompanhando! !!

    wwwww.eleganciando.blogspot.com.br

    ResponderExcluir
  10. Não conhecia esses sites,vou visitar! Obrigada,beijão ♥.

    Blog: Garota Rude:3
    Canal: Garota Rude

    ResponderExcluir
  11. realmente são sites ótimos que ajudam muito nos blogueiras ..
    beijos :)


    http://loucaapaixonada22.blogspot.com.br/

    ResponderExcluir
  12. Amei o post flor! Super vai me ajudar!
    Instagram @brunaestiloitgirl
    Blog | Facebook | Twitter | Canal Youtube 
    Beeijos (:

    ResponderExcluir
  13. Ótimo post!
    Quando tive outros blogs tinha mais paciência para ficar programando, agora tenho medo de estragar hahaha

    Blog do Sofá

    ResponderExcluir
  14. Arrasou no post, muuito útil! Tava aqui mesmo nestante pensando em mudar alguma coisa no layout, tem um tempão que está do mesmo jeito e eu já tô enjoando... hahaha


    Beijos, Deni
    vivendosemprada.blogspot.com

    ResponderExcluir
  15. Ótimas, dicas adorei os sites e salvei aqui, porque a gente nunca sabe quando vai precisar né? O post ficou bem legal e muito completo!
    http://www.hurricanestars.com/

    ResponderExcluir
  16. Só conhecia o primeiro site de todos da lista. Que interessante ter tantas opções para arrumar o blog do seu jeitinho né? Boas dicas!

    Beijos,
    http://www.girlbeinggeek.com.br/

    ResponderExcluir
  17. links super úteis ♥ vou dar um grau e tanto no meu lay

    ResponderExcluir
  18. realmente são links mega úteis eu já usei muito esse 1° que sitou e me ajudou bastante .
    Ótimo post ! beijos

    http://loucaapaixonada22.blogspot.com.br/

    ResponderExcluir
  19. Eu também tenho dificuldades com HTML, não sei quase nada, porém graças ao Google, e a alguns blogs muito bons a respeito disso, hoje meu blog ta montadinho e tudo feito por mim mesma. Blogs como o seu me inpiram, obrigada!

    Momentoprimavera.blogspot.com

    ResponderExcluir
  20. Obrigada pelas dicas!
    Vou conferir todas!

    Beijos!
    SUA ESTANTE
    Gatita&Cia.

    ResponderExcluir