31/05/2015

6 dicas para você deixar seu blog mais bonito


Ois! O que é esse frioooo aqui em PF!? Barbaridade, tchê! x_x
Hoje estoy aqui para dar 10 dicas a você que, como bom iniciante, está tentando deixar o seu blog mais beautiful, mais binitinho, mas cute cute. *.*
Lá vamos:

1. NÃO USE OS LAYOUTS PADRÕES DO BLOGGER
Para que um blog se destaque, é necessário que ele seja diferente dos padrões já existentes (ou seja, os padrões do blogger, que já vêm prontos, e que todo mundo usa). Não tem problema nenhum usar os modelos padrões do blogger, mas assim seu blog será como qualquer outro blog, e não é isso que você quer, é?! Seu blog precisa ter a sua cara. Se você não consegue, ou não quer mexer no html do seu blog, baixe algum layout por aí. Eles são usados por várias pessoas, mas, tenha certeza de que bem menos que os padrões do blogger. Por outro lado, saiba que esses layouts padrões são ótimos para serem modificados. O meu por exemplo, nada mais é que um desses modelos só que modificado. Deixo aqui o link de uma postagem bem legal que encontrei no blog Jackie Dream, e que disponibiliza layout de html bem simples, pronto para ser modificado: Aqui

2. PENSE NA ESTRUTURA DO SEU BLOG
Trace um plano para seu blog. Você quer o menu em cima? Ao lado? Que imagem você quer colocar no seu cabeçalho? Se necessário, faça um desenho a lápis, em uma folha, de como você quer que fique o resultado de seu blog. Mesmo que você não saiba mexer no html, existem muitos tutoriais bem explicados por aí que vão te ajudar a modificá-lo, mas é preciso que você pense na estrutura do blog antes, pois fazer tutorial em cima de tutorial e não combinar, por exemplo, cabeçalho com menu ou área de posts com sidebar, vai acabar deixando seu blog mais feio até que os padrões do blogger. Fiz a imagem abaixo para mostrar a estrutura básica de um blog, mas saiba que, no html, você pode brincar um pouco com ela: jogar o menu antes do cabeçalho, excluí-los, se preferir, alterar o tamanho da área dos posts, remover a sidebar, separar a sidebar da área de posts e muito mais... Primeiro decida o que você quer fazer, depois vá atrás dos tutoriais. Dependendo do que se quer, as vezes nem é preciso mexer no html (mas ele será necessário para as modificações mais detalhadas). É claro que, dentro dessas divisões ainda existem algumas subdivisões. Por exemplo: No #header (cabeçalho) temos a imagem (slogan) e título do blog; no #posts temos cada post, separadamente; na #sidebar e no #footer entram os gadgets (aquelas caixinhas que contém informações como "Quem sou eu", "Marcadores"...); e no #menu temos as páginas do blog.


3. VÁ ATRÁS DE TUTORIAIS
Tudo que sei (o que não é muito, mas que considero suficiente) aprendi através de tutoriais. Personalize a sidebar, modifique a área dos posts, crie um cabeçalho (e para isso será necessário seguir o passo 4), mude a área dos comentários (que aparece quando você entra em algum post), coloque um fundo bonito (tenho uns nesse post), enfim, modifique o design do seu blog com ajuda dos tutoriais disponíveis na net. Para isso, procure no google bem a grosso modo o que você quer fazer, e sempre aparecerá algo que te levará a algo que te levará aonde você quer. Procure, por exemplo: "Como modificar aquelas caixinhas ao lado das postagens do blog" (nunca esqueça de colocar "no/do blog" ou "blogger") e logo você saberá que elas são, na verdade, gadgets da sidebar. Fique ciente de que será necessário, na maioria das vezes, encarar aqueles horripilantes códigos a que chamamos de HTML. Deixo aqui em baixo o endereço dos blogs que mais me ajudaram e ainda ajudam, e dou o maior dos créditos ao Cherry Bomb, que já não está mais entre nós (snif), mas que ainda está aberto para que as pessoas vejam os tutoriais que já foram postados lá.
Redescobrindo Sonhos (Layouts perfectooos disponíveis para download)
(Assim que lembrar de outros, coloco-os aqui)

4. APRENDA A MEXER EM UM PHOTOSHOP
Para que seu blog tenha imagens "autênticas" é absolutamente necessário que você aprenda a mexer em um photoshop. Coloquei essas aspas em "autênticas" porque, na verdade, as imagens, as vezes (na maioria das vezes), não são tão autenticas assim, já que as pegamos da internet e apenas as modificamos no photoshop. É preciso ter cuidado com os direitos autorais das imagens, mas no geral, muitas das que encontramos no google já estão em circulação, e fica difícil saber se elas possuem direitos autorais ou não. Se tem marca d'água, nem pegue! Se não, siga meu lema, é bem simples: caso alguém reclame, retire a imagem do ar. Pronto! Sem estresse. Não tem como a gente adivinhar tudo, não é? E desenhar no photoshop é muito difícil, meu nível está bem abaixo disso (hehe). Voltando ao photoshop, eu aconselho o GIMP, pois é gratuito e leve para o computador. Para instalar o GIMP siga este tutorial. Pretendo ensinar mais coisas sobre o gimp, mas o melhor é você ir fuxicando em tudo e aprendendo sozinho, ele é bem simples de entender.
A imagem abaixo construí nele (GIMP). O fundo fiz com as próprias ferramentas que ele disponibiliza, a letra foi baixada da internet e o gato foi roubado do we heart it.


5. NÃO ESQUEÇA DOS PEQUENOS DETALHES.
Os pequenos detalhes são importantes! Segue aqui, no quinto item, uma listinha deles. É claro que o uso ou não destes para deixar ou não o blog mais bonito vem de uma visão minha, mas no seu blog você é quem decide. Junto às dicas deixo um link de tutorial de como usá-las, entretanto, dependendo do blog, as vezes é preciso ir à caça de outro tutorial até que um funcione para o seu blog. A vida na blogosfera é isso mesmo, acostume-se.
a) Remova aquele "Assinar: Postagens (Atom)" que fica logo após os posts do blog. Eu o acho feio e desnecessário. Para tirá-lo siga este tutorial.
b) Retire a Navbar (aquela barrinha que fica lá em cima, no blog). Para saber como, clique aqui.
c) Exclua aquela barrinha que aparece quando você clica em um marcador. A que diz mais ou menos assim: "Mostrando postagens com marcador tal". É desnecessária e feia também, já que os marcadores podem ser encontrados em um gadget na sidebar ou até mesmo no menu. Para excluí-la siga este tutorial.
d) Para uma melhor leitura, é bom que os posts do blog tenham uma fonte de letra comum, entretanto, para títulos e outros, use letras mais bonitas que você pode baixar da internet (como a Lobster two ou a Amatic, que são lindas!). Se quiser usá-las no blog, siga este tutorial ou este. Para mim só funcionou o primeiro. Se você quiser usar a letra no seu computador, no GIMP ou no Word, por exemplo, será necessário baixá-la e e copiá-la para a pasta de nome "Fontes" no seu computador (logo farei um tuto sobre isso).
(Se eu lembrar de outros detalhes, adiciono-os aqui).

6. ADICIONE BOTÕES DE REDES SOCIAIS NO SEU BLOG
Sabemos que, nem todo mundo gosta e tem blog, então, para que seu blog tenha mais repercussão, é interessante que ele possibilite ao visitante coisas como "compartilhar através de "tal" rede social". É legal colocar essa opção para o google e twitter, mas eu acho que o facebook é o mais importante. Por isso, as opções que eu acho que não podem faltar, de maneira nenhuma, em um blog, são as de: curtir, compartilhar e comentar pelo facebook. Pretendo fazer um tuto mais completo sobre isso também, pois os que achei são todos em fragmentos, mas enquanto não faço deixo aqui alguns dos links que lembro de ter usado ara que você escolha os que preferir:
Follow your dreams: Ícones fofos
Muno Blogger: Comentários pelo facebook (parte 1: Criar aplicativos do facebook; parte 2: Comentários do facebook no blogger)
Obs: Esses últimos tutoriais, dos comentários do facebook no blogger, são muito bons! Testei vários e esses foram os melhores pra mim. É preciso fazer as duas partes. Quanto aos outros, não usei apenas um tuto, fiz uma misturança.

Espero que esse post tenha sido útil! Beijocaaas geladas :*

03/05/2015

Área de comentários do blog personalizada


Oie! A pedido da Nanda, do blog Nandalandia, trago este tutorial de como personalizar a área dos comentários do blog. Mais especificamente, deixar da forma como está o meu, atualmente.
Ele ficará assim:


Então, vamos ao tutorial!

1- Antes de tudo, faça um backup do seu layout, pois você precisará salvar o blog para visualizar se deu certo, e, se o tuto não der certo no seu blog, você acabará estragando seu layout. Não sabe como fazer o backup? Veja esse tutorial

2- Abra o HTML do seu blog, aperte Ctrl + F e procure por:

#comments {

3- Aparecerá um código parecido com esse (se seus comentários já forem personalizados, ele provavelmente estará bem maior):

#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

4- Substitua tudo por:

/* INÍCIO DA PERSONALIZAÇÃO DOS COMENTÁRIOS */
#comments {
  background: #ffffff; /* cor de fundo da área dos comentários */
  padding: 15px; /* largura da área - aumente o nº para diminuir */
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-timestamp a {
  font-family: 'Amatic SC', cursive; /* estilo da fonte do título dos comentários */
  font-size: 30px; /* tamanho da fonte */
  text-align: center; /* alinhamento do texto */
  color: #a8cec3; /* cor da fonte */
}
.comments .avatar-image-container {
  max-width: 50px;
  max-height: 50px;
  min-height: 50px;
  min-width: 50px;
  background: #a8cec3; /* cor da borda em volta do avatar */
  padding: 5px; /* espessura da borda */
  border-radius: 200px; /* borda do avatar redonda, se preferir, exclua essa linha */
  border: 1px dashed #ffffff; /* tamanho e estilo da borda */
}
.comments .avatar-image-container img {
  max-width: 50px;
  max-height: 50px;
  min-height: 50px;
  min-width: 50px;
  border-radius: 200px; /* avatar redondo, se prefeirr, exclua essa linha */
}
.comment-header {
  background: #fce9e9; /* cor de fundo do nome do autor do comentário/*
  border: 1px dashed #ea9999; /* tamanho, estilo e cor da borda do nome do autor do comentário*/
  border-radius: 5px; /* deixa a área do nome do autor arredondada, retire essa linha se preferir */
  padding: 3px; /* espaçamento entre as outras áreas dos comentários */
}
.comment-header a {
  color: #a8cec3 !important; /* cor do nome do autor do comentário */
  font-family: 'Poiret One', cursive; /* fonte do nome do autor do comentário */
  font-size: 20px; /* tamanho da fonte do nome do autor do comentário */
}
.comment-header a:hover {
  color: #684980 !important; /* cor do nome do autor do comentário quando o mouse é passado */
  text-decoration: none;
}
.comments .comments-content .datetime a {
  font-family: 'Poiret One', cursive; /* fonte da data do comentário */
  font-size: 14px !important; /* tamanho da fonte data do comentário */
  color: #a8cec3; /* cor da fonte da data do comentário */
  float: right; /* alinhamento do comentário - retire se preferir */
  line-height: 16px; /* tamanho da linha do comentário */
}
.comments .comment-block {
  margin-left: 70px; /* espaço entre o avatar e a área dos comentários */
}
/* FIM DA PERSONALIZAÇÃO DOS COMENTÁRIOS */

6- Faça as alterações necessárias para combinar com o layout do seu blog.

5- Outra coisa: Essas fontes (Amatic e Poiret One) que usei nesse código não serão reconhecidas pelo blog. Para que o blog reconheça-as é preciso que você mexa em outra parte do HTML do seu blog, também. Para isso, ainda no HTML, procure por:

</head>

6- Acima de </head>, cole os seguintes códigos:

 <link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'/>
  <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>

7- Salve e veja se deu certo! Não deu? Lembra que você fez um backup do seu blog? Agora restaure-o.

Se o seu layout já for muito modificado, talvez não dê certo. O bom seria retirar os códigos de estilo do seu comentário atual pra depois colocar esse.

Gostou? Deu certo? Dúvidas? Deixe um comentário...

6 planos de fundo pro seu blog!


Esse post é para dar algumas dicas de planos de fundo fofos pra você utilizar no seu blog (clique nas fotos para salvá-las):
 

 

 

 

 


Gostaram? Não esqueçam de colocar pra repetir. Beijos!