Categoria "HTML e Tutoriais"
18 de mar de 2015

Como fazer posts destacados responsivos no WordPress

Ter uma área de posts em destaque é maravilhosa para chamar o seu leitor à assuntos que você acredita que merece aquele olhar diferente. Vários blogs adotam esta técnica pois, além de direcionar o leitor aos melhores posts, também incentiva o leitor a navegar mais no blog. O tutorial de hoje é sobre como fazer estes posts destacados de uma forma fácil (e responsiva!), onde você vai ter total autonomia para selecionar qual post irá para o destaque no topo do blog. E neste tutorial também explicarei várias coisas sobre responsividade e teorias de proporção para deixar tudo lindo em qualquer dispositivo!

O tutorial é grandinho, mas garanto que vale muito a pena!

Visual dos posts em destaque que será ensinado neste tutorial

Visual dos posts em destaque que será ensinado neste tutorial // Fonte das imagens: 001, 002, 003, 004

Introdução

Antes de mais nada, é bom saber o que você está lidando por aqui. O CSS é responsivo, ou seja, ele vai mudar de acordo com a largura do dispositivo para adequar. Na medida que ele for diminuindo, o número de posts também diminui, e os recursos de mouseover são eliminados, já que no celular não temos um pouse para pousar em cima do elemento, mas sim um dedo que obrigatoriamente deverá dar um “tap” — um clique — para que a ação aconteça. Além disso, vamos pensar também que estes são uma espécie de lista, onde cada um é um item de lista. Veja abaixo a demonstração que fiz para você visualizar, bem como é a estrutura do html abaixo:

Ver Demonstração

<div class="wrap-posts-destaque">
	<div class="posts-destaque">
		<ul>
			<li>
				<div class="mostra-post">
					<div class="thumb"><img src="http://imagem-thumbnail.jpg" alt=""></div>
					<a href="http://link">
						<h4>Titulo post <span>Data</span></h4>
					</a>
				</div>
			</li>
		</ul>
	</div>
</div>

O código PHP do posts em destaque pode ser personalizado em duas formas:

  1. Por seleção do último post de uma ou várias categorias específicas;
  2. Por posts que receberam mais visualizações.

O código para estes tipos de posts no WordPress é chamado de loop. Isso significa que este recebe uma atualização constante e sempre de forma repetitiva, como na área de posts nativa em que aparece nossas postagens do blog. O que vamos fazer em nosso tema é fazer uma nova chamada de loop para personalizar e realizar uma tarefa específica. O loop que usaremos no tutorial de hoje é o primeiro item da lista: seleção do último post de uma ou várias categorias específicas.

Os códigos podem parecer um pouco complicados, mas prometo que o deixarei o mais explicadinho possível para não houver confusão hehe. Vamos botar a mão na massa agora?

Saiba mais…

07 de mar de 2015

Guia Básico do Blogger

O Blogger foi uma das primeiras plataformas a serem criadas para a publicação de blogs e permanece até hoje como uma das mais utilizadas entre os usuários. Neste post trarei um guia apresentando suas principais características e algumas dicas de personalização para iniciantes passando um pouco da minha experiência com o blogger e como blogueira. Se você tem vontade de começar um blog, não deixe de ler!

O que é o blogger?

O Blogger é um serviço oferecido pelo Google, basta acessar o site e realizar o login com a sua conta de email. Caso você não tenha uma conta no Gmail há duas opções: Vincular sua conta de outro servidor de email ao Google ou fazer uma no Gmail. Ambos os procedimentos são simples e orientados pelo próprio site a partir do momento que você clica em “criar uma conta”. Após, você entrará no seu painel inicial e clicará em ‘Novo Blog‘.

Criando novo blog.

A escolha do nome e endereço é pessoal e somente sua. Deixo aqui algumas recomendações clichês para otimizar desde o começo o seu blog.

Sugere-se que a URL seja curta, tendo entre três ou quatro palavras, afinal quem vai se lembrar do endereço completo de um blog com o seguinte nome: blogdaluaninhafofinhaquegostadcinema.blogspot.com. Além disso, é interessante que sejam palavras que as pessoas não possuam dificuldade de escrever e não possuam acentos e cedilhas (não são aceitas na URL, porém há pessoas que colocam o ‘c’ em uma palavra que as possui), por exemplo, você sabe escrever ‘exceção’, mas pode ser que a pessoa do outro lado da tela não saiba e por isso não volte a visitar seu blog, já que não encontrará a URL correta.

O que o painel do blogger oferece?

1) Postagens

Nesta área você poderá programar e gerenciar suas postagens, elas serão dividas em três categorias: publicadas, rascunhos e todas. No painel, você irá visualizar primeiro o título da postagem em azul escuro, ao lado dos marcadores ou se você preferir, tags em laranja e ainda mais a frente temos sinalizado se o post é rascunho ou não. Por ultimo, os comentários, visualizações e data da postagem. Como podemos ver na montagem abaixo, as postagens podem ser gerenciadas em massa, o que significa isso? Você pode marcar o quadradinho ao lado dela e realizar ações como adicionar tags (falarei sobre isso a seguir), excluir, publicar e transformar em rascunho.

Gerenciamento de postagem

Pronto para o primeiro post? Vou mostrar algumas configurações que o blogger permite para suas publicações. Para criar uma nova postagem, basta clicar naquele botão acima do “Visão geral“. Parece bobagem, mas se você for uma pessoa lenta que nem eu, vai ficar uns segundinhos se perguntando “Como começo?”. O painel de postagem tem características básicas como botões para enumerar, correção ortográfica automática, inserção de vídeos, imagens, texto em negrito, sublinhado, itálico, e ainda algumas outras que explico na imagem abaixo.

Painel de postagem

O tamanho da imagem — Jack Sparrow no exemplo — pode também ser ajustado, assim como sua colocação no centro, esquerda ou direita. Há também uma opção de editar a postagem diretamente no HTML, mas recomendo apenas para quem entenda de codificação. No print acima, há apenas uma parte da área de postagem, no seu canto direito, você encontrará o painel de “Configurações de postagem“.

Configurações de postagem

  • Marcadores: São as categorias do seu blog. Com esta ferramenta você pode classificar os seus posts de acordo com o assunto tratado e assim, posteriormente criar um menu para seus leitores encontrarem postagens de determinado tema mais facilmente.
  • Programar: Permite que o blogger publique automaticamente um post previamente escrito. Basta escolher a data e hora.
  • Link permanente: O google reconhece melhor nas buscas uma URL organizada, objetiva e pequena, entretanto o Blogger é programado para utilizar as primeiras palavras da sua postagem na URL da mesma, então basta usar esta ferramenta do painel para trocar isto por algo mais simples.
  • Opções: Você poderá escolher se permitirá comentários na postagem, se o HTML que você digitar será interpretado e se ao pressionar enter o blogger inserirá uma quebra de linha. O que é isso? Apensa significa que você passará para a linha de baixo, normalmente ‘enter’ é dado quando você termina um parágrafo e deseja começar outro.

2) Páginas

O Blogger já vem com sua própria hospedagem inclusa. Você pode criar páginas estáticas nele para acrescentar ao seu menu com coisas que não há como fazer nas postagens diretamente ou que precise de uma personalização mais cuidadosa, como por exemplo formulários de contato, blogroll, entre outros. O Painel é exatamente igual ao de postagens.

3) Comentários

Há um painel de moderação dos comentários, onde você pode visualizá-los, aceitá-los, excluí-los e marcá-los como spam, o que ajuda o blogger a filtrar melhor.

Painel comentários

4) Estatísticas

Um histórico detalhado dos seus visitantes, separado da seguinte forma:

  • Postagens: Visualizações de página de acordo com as suas postagens.
  • Origens de tráfego: Mostra se alguém foi indicado ao seu blog, por exemplo: alguém em outro blog deixou o seu link e a pessoa clicou, ou quando procuraram por alguma palavra chave e foram redirecionados ao seu blog. É interessante saber de onde o seu público vem e o que eles procuram para redirecionar melhor o seu conteúdo.
  • Público: Mostra de que região do Brasil a pessoa está acessando, ou até de qual país, por qual navegador e sistema operacional. Isso é útil na hora de personalizar algumas coisas no seu HTML, como por exemplo colocar uma caixinha de tradutor ou oferecer códigos que se adaptam aos mais diversos navegadores. Não se esqueça de ativar a opção de não rastreamento das suas visitas no blog, assim se você for como eu e fizer 800 visitas por dia, ele não irá contar.

Estatísticas

5) Ganhos

A forma mais simples de ganhar dinheiro com seu blog é o Google Adsense. Na aba “Ganhos” você poderá se inscrever a partir do momento que cria o blog. Sua aprovação depende da quantidade de conteúdo, tráfego (visitas), originalidade dos posts, entre outros.

Adsense

6) Layout & Modelo

As abas Layout e Modelo do painel se referem a personalização da página do seu blog. Hoje não falarei de codificação, HTML ou CSS porque o texto já está enorme, então vamos abandonar a aba Modelo por enquanto. Entretanto, vou apontar algumas coisinhas que você pode fazer usando qualquer um dos modelos oferecidos pelo blogger. Na aba Layout você verá um rascunho de como o seu blog está, e assim poderá adicionar, remover ou editar áreas do seu blog. Por exemplo no cabeçalho é possível adicionar descrição, imagem e título do blog. Ao clicar em “Adicionar Gadget” você encontrará opções úteis para a personalização do seu blog, como por exemplo você poderá colocar a aba de seguidores, caixa de pesquisa, tradutor, formulário de contato, calendário, postagens populares, lista de links e muito mais!

Modelo

7) Configurações

Nas configurações você poderá ajustar por exemplo o fuso horário ao qual você pertence, formato de data, moderação de comentários (permitir ou não anônimos), quem pode ver o seu blog, idioma. Deixo abaixo as mais importantes com suas devidas explicações.

Configurações comentários

Divulgação, etiqueta e dicas gerais:

Quando começamos um blog, ficamos empolgados para que as pessoas nos visitem e interajam com nossas postagens. Existem várias formas de divulgar o seu blog, seja através de redes sociais ou pessoalmente, criando um cartão de visitas. Deixo aqui a minha opinião sobre algumas destas:

  • Facebook: Os chamados “grupos de divulgação” Facebook são uns dos principais canais utilizados por blogueiras, entretanto para a maioria das pessoas isso não gera um bom número de visitas. Porque? Você está entrando em uma “comunidade” onde todos têm o mesmo objetivo: se divulgar. O que acontece é que todo mundo deixa seu link lá e não visita o de ninguém. Claro, há exceções, mas elas não superam a grande massa. Você pode também criar uma página para seu blog e convidar as pessoas que você conhece para curtir, nela você divulga seus novos posts para as pessoas que já se interessam pelo seu blog, afinal elas curtiram a página.
  • Youtube: A grande febre atualmente é ter um canal do youtube para o seu blog, onde você fará vídeos para ‘rechear’ algumas de suas postagens com uma forma diferente de apresentar seu conteúdo. Como há formas de aumentar a monetização do seu blog no youtube, ele se torna uma opção atraente.
  • Cartões de visita: Talvez a forma mais antiquada de convidar alguém para curtir seu blog. Normalmente usado pelas blogueiras de beleza e saúde para se candidatar a parcerias com lojas e marcas.
  • Twitter | Instagram: Acho que quanto mais pessoas você puder atingir melhor, então estas redes sociais podem ser poderosas aliadas também.
  • Spam: Sabe aquela pessoa que tem envia aquele inbox pedindo pra você curtir algo, isso cinco minutos depois dela ter te marcado numa publicação que você também deveria curtir? Então… Isso não é visto como algo legal e atraente pela maioria das pessoas. Incomodar alguém para que ela curta algo pra você só a fará criar um sentimento de antipatia pelo que você pediu. Eu normalmente digo que esta forma de divulgação tem efeito contrário.
  • Trocas: Outra prática comum é a troca de likes ou divulgações. Acredito que isto cria “seguidores fantasma”, ou seja, pessoas que curtem a sua página, mas não interagem e isso é pior do que ter poucos seguidores.

Mas como eu divulgo meu blog então? Antes de se preocupar com isso, pense primeiro em produzir um conteúdo de qualidade, focando na demanda do seu publico alvo. Seguidores virão, cedo ou tarde. Checar a ortografia, qualidade das imagens e originalidade das postagens ajudam bastante também. Estes são os motivos principais que atrairão o leitor. E seja qual o assunto e objetivo do seu blog, faça-o com carinho e gosto, isso faz toda a diferença. ;)

Página 8 de 9123456789