Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo Tutoriais

Do it yourself: Não é tão difícil assim #4

Nem acredito que consegui manter o dia da postagem da tag. Apesar que já ser quase o finalzinho dia, ainda estamos na terça-feira, então está valendo rs.

Bem, como eu disse na semana passada, o post de hoje será exclusivo para explicar como modificar a área de comentários no blogger. Não só no template mínima como em outros templates do blogger, os comentários não vêm com a opção de "responder" adicionada no código, por isso é necessária uma alteração para que funcione. Lógico que isso altera também o CSS, por isso a explicação de hoje é mais longa.
Alterando o código
Localize o código abaixo:
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
 </b:if>

E substitua todo o código acima por:
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if> </b:if>

Lembrando que por padrão estamos usando Template Mínima, para fazer o download do código basta clicar aqui.

Agora o CSS! Depois da alteração no código as opções para personalizar o formulário de comentários muda bastante da versão original, pois te dá mais possibilidades para personalizar. Com isso é precisso adicionar ao seu CSS o código abaixo. Para ficar de uma forma melhor de ser organizada, recomendo que você substitua o CSS original dos comentários por este.

No template Mínima é fácil de encontrar esta parte, pois a mesma vem sinalizada. Ou seja, você pode encontrar pocurar pela linha "Comments". Depois de localizar basta substituir.



Prontinho! Fácil não é?

Beijos!
Escrito por: Michelly Melo
Marcadores:

Do it yourself: Não é tão difícil assim #3


Headings
As "heading tags" (tags de cabeçalho) são bastante importante para o blog. Elas controlam a estrutura geral do seu layout, informando aos mecanismos de busca qual é o conteúdo que tem mais importância na página. A mais importante é a tag h1 e a menos importante é a tag h6.

No blogger a tag h2 refere-se a data da postagem e ao título dos widgets, portanto, poder ser que ao atribuir a tag h2 como “título” dentro de seu post, a fonte fique com a mesma formatação css referente a data ou aos títulos de seus widgets. Enquanto a tag h3 é representada pelo título da suas postagens. De uma forma mais fácil:

H1 - O títilo do blog;
H2 - O título de cada gadget da sidebar e a data;
H3 - Título da postagem;
H4 - Fica mais escondidinho, mostra o número de comentários ao abrir uma postagem.

Post
Data: No template Minima, a data está representada pelo h2.date-header.
Post: É o segundo elemento do código. Se refere a toda a área dos posts. No template Minima está representado por: .post.

  • .post-body – se refere somente ao corpo do post. Os estilos que você aplicar neste trecho valerão somente para o corpo do texto das postagens. 
  • .post p: Representa o paragrafo do post. Neste trecho você pode adicionar um recuo de texto, e para isso use a propriedade text-indent.
  • .post h3: O titulo do post. Nesta parte que você pode acrescentar imagem, borda, tamanho da fonte, cor da fonte, alinhamento do texto, entre outros, para se aplicar a todos os títulos de suas postagem.
  • .post h3 a - Link ativo.
  • .post h3 a:visited - Link já visitado.
  • .post h3 a:hover - Mouse em cima

Imagem do Post: É representado pela tag .post img. Todos os efeitos que você quiser adicionar nas suas imagens das postagens devem ser acrescentados nessa tag. Se no seu template não tiver este trecho, você poderá acrescentá-lo e incluir estilos a sua maneira.

Rodapé do Post: No template Mínima é representado pela tag .post-footer.
Links dos comentários: É representado pela tag .comment-link.
Blockquote (citações): Pode ser modificado na tag .post blockquote.

Esse são as tags básicas da área de postagem. Na próxima semana, preparei uma postagem para a área dos comentários que precisa de uma pequena alteração no código. Então será um post mais longo.

Beijos
Escrito por: Michelly Melo
Marcadores:

Do it yourself: Não é tão difícil assim #2



Ei, pessoal! Tudo bem?

Um pouquinho atrasado, mas hoje temos a segunda parte do tutorial de como fazer o seu próprio layout. Resolvi continuar explicação pelo mesmo jeito que sempre faço os meus. Sempre edito pela ordem que vai aparecendo no Template Mínima. Acho mais fácil de localizar tudo e manter a organização na hora de editar tudo. Lembrando que o tutorial é extenso e será explicado de forma muito (muito mesmo) fácil. Então vamos em frente.

Atributo Body
O body é o elemento responsável por ser o container de tudo que é conteúdo do site. Ou seja, o que está dentro do <body> é o que fica ou ficará disponível para visualização do visitante. Vale lembrar: o body é uma tag HTML e como tal, aceita atributos. Por isso, se você quer definir um padrão para o site, pode colocar os atributos nessa tag.

1. Background
A parte mais fácil de fazer no template é adicionar o background, pois o mesmo só poderá ser uma cor ou uma imagem.

background: $bgcolor;

Onde o $bgcolor é o atributo padrão do template mínima, basta altera-lo para o código da cor que deseja. Se você quiser adicionar o link basta usar:

background: url(link-da-sua-imagem-aqui);

O atributo background tem vários características e você pode encontra-las de forma detalhada nesta página aqui.

2. Links
Seguindo do body, temos os atributos para os links em geral. Um link visitado, não visitado, ativo ou no estado hover pode assumir aspectos diferentes (cores, fundos, etc...). Para não ficar extenso, você pode ver suas propriedades aqui.

Header: o cabeçalho do layout
O cabeçalho por padrão fica dentro do #outer-wrapper. Ali também contém a área da postagem, a sidebar e footer. Por isso, se você aumentar o tamanho do #header-wrapper ele vai ficar com uma parte "escondida" por não caber no valor declarado no #outer-wrapper. Ou seja, a forma mais simples de resolver é você lembrar de alterar o valor atribuído lá também.

#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper: corresponde a toda a área do cabeçalho.
#header-inner
#header: corresponde a coluna dentro do cabeçalho.
#header h1: corresponde ao nome do cabeçalho (título do blog).
#header a: corresponde ao link do nome do cabeçalho.
#header .description: corresponde a descrição do blog que fica dentro do cabeçalho.
Designer de modelo:
.header-outer: área do cabeçalho
.header h1: título do blog
.header h1 a: link do nome do cabeçalho
.header .description: descrição do blog

Outer wrapper
Seguindo o template, vem o #Outer-Wrapper que, assim como foi dito mais acima, é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar e footer. Sendo assim, qualquer alteração que você fizer com realação a largura dos atributos citados, vai ser necessário alterar a largura do #outer-wrapper. Se você aumentar a largura do post e da sidebar, mas não alterar a largura do #outer-wrapper, o seu layout vai ficar todo desalinhado. Muito confuso? Veja o exemplo:


Note que, na versão original, a soma do width (largura) do Main e da Sidebar é menor do que o valor do Outer. Já na versão alterada, a soma ultrapassa o valor. Se você fizer o teste, vai perceber que o seu layout vai ficar todo desajustado. Por isso é importante lembrar de manter a largura do Outer igual ou superior a soma do Main e da Sidebar.

Observação: Isso também serve para o Footer. A largura total dele deve ser igual ou menor que a largura do Outer.


É isso. Na próxima semana tem mais.
Beijos

Escrito por: Michelly Melo
Marcadores:

Do it yourself: não é tão difícil assim #1

Algumas vezes recebo e-mails de leitores pedindo para que eu faça um passo-a-passo de como criar o próprio layout. Por ser um tutorial extenso, nunca pensei em postar nada do tipo aqui no blog, porque não é algo que possa ser resumido em uma única postagem. Então, para ajudar um pouquinho, vou fazer uma sequência de postagens explicando alguns conceitos básicos para quem não quer depender mais de layouts prontos e precisa de um pouquinho mais de noção de HTML e CSS para conseguir editar sozinho.

Um conselho muito útil para quem está começando é: use uma base pronta! O próprio blogger disponibiliza vários templates básicos que depois de editados diminui (e muito) o seu trabalho. Já testei a maioria das versões do blogger, mas a versão mais fácil de usar é o Template Mínima. Por isso todos os tutoriais que vou postar aqui o terão como base. (Para fazer o download basta clicar aqui)

Primeiro passo: Conheça a base que você está usando.
Logo no começo do código você vai encontrar as definições básicas das variáveis (Variable definitions). Recomenda-se que não apague, pois alguns recursos do código já estão pré-definidos nesta parte. Isso não impede que você altere os estilos mais para frente no código. Em seguida virão as variáveis utilizados na construção do layout.

Segundo passo: Conheça a estrutura do template.

Header: O cabeçalho do layout é representado por: #header-wrapper e #header.
Outer-wrapper (a parte cinza da imagem): Basicamente é parte que abriga todo o layout, representada por #other-wrapper.
Sidebar: A coluna lateral é representada por: #sidebar-wrapper.
Main: A coluna da postagem é representada por: #main-wrapper.
Footer: O rodapé do layout é representado por #footer-wrapper.

Terceiro passo: Nunca altere o código sem ter um backup!
Tudo bem, pode parecer redundante, mas por experiência própria: não corra o risco de perder tudo. O blogger, ou qualquer outra ferramenta, pode falhar de vez em quando e se isso acontecer você vai agradecer muito por ter feito um backup das suas informações. Então sempre que você terminar de alterar o código, baixe a última versão. Isso será útil até se na hora de editar o código você apagar algo que não deveria. ;)

É isso! Semana que vem tem a próxima postagem do tutorial. Aproveitem e mandem por e-mail o que vocês querem ver por aqui.

Beijos!
Escrito por: Michelly Melo
Marcadores:

Do it yourself — 3 sites para deixar nos favoritos

Oii, pessoal!

Sempre recebo vários e-mails pedindo para que eu poste algumas dicas para blogueiros que querem aprender a fazer o próprio layout ou dicas de sites que eu uso para buscar os materiais para blog. Então resolvi dar maior atenção para essas dicas aqui. A partir de hoje, teremos um coluna semanal com dicas para quem quer colocar a mão na massa e não depender mais de layouts free ou encomendados.

Antes de mais nada, por favor não se desesperem! No começo, principalmente para quem nunca mexeu com com HTML e CSS, pode parecer um bicho de sete cabeças, mas para tudo damos um jeitinho.

E para começar com o pé direito e não assustar ninguém, hoje vou indicar três sites que nunca deixo fora dos meus favoritos e sempre salvam todos os layouts que eu faço. Espero que vocês gostem das dicas e aproveitem bastante!

1. Freepik
Freepik é um motor de busca que ajuda designers gráficos e desenvolvedores de web a localizar fotos de alta qualidade, vetores, ícones, ilustrações e arquivos PSD para seus projetos criativos.
É uma ferramenta incrível que rastreia e localiza conteúdo gráfico gratuito na Internet e mostra os resultados em um plano ordenado para fácil acesso. Você também encontrará muito conteúdo gratuito e exclusivo, de alta qualidade, desenhado pela equipe Freepik e atualizado diariamente.
Muitos já conhecem, mas o Freepik é o melhor site para encontrar vetores incrível para usar nos seus layouts.

2. Flaticon
Com mais de 46 mil ícones criados diretamente no Photoshop, o Flaticon é uma das melhores escolhas do mercado. O modo para encontrar os ícones que você pretende é muito simples: basta pesquisar na barra de pesquisa e aparecem todas as opções. Ao todo, já mais de 80 mil designers utilizaram este plugin. Depois de escolher o ícone tem possibilidade de customiza-lo conforme as suas necessidades.

3. Des1gn ON
O Des1gn ON surgiu com o intuito de ajudar nesse quesito, sempre com matérias quentes e criativas, assuntos desde curiosidades, eventos, até dicas, freebies, entre outros. Des1gn ON é o blog sempre ligado nas novidades do mundo do design, é o blog para sua inspiração diária!

Bônus: para guardar nos favoritos e no coração


O Canva é um software de design gráfico gratuito, fácil de usar e completamente online. E já está fazendo bastante sucesso entre seus usuários! O Canva existe há menos de 5 anos e conta com 11,4 milhões de usuários em 179 países.

Para acessar o site, clique aqui.

Para quem não quer o trabalho de ter que instalar um programa e ainda assim deixar o blog lindo, precisa conhecer esse site!


Beijos!


Escrito por: Michelly Melo
Marcadores: