Categoria "HTML e Tutoriais"
11 de fev de 2016

Como personalizar links no HTML com CSS

Oi, gente! Tudo bem com vocês? Antes de qualquer coisa só queria avisar que a série de posts ensinando a criar um layout no WordPress foi adiada porque o primeiro post acabou sendo excluído sem querer por causa de problemas técnicos aqui no CDB. Eu irei voltar com a série – o quanto antes -, mas acabei não tendo tempo pra refazer o primeiro post.

Sem Título-9 copiar

O tutorial de hoje é ensinando como personalizar links no HTML com CSS. Eu sei que é um tutorial bem simples, mas vale tanto pra Blogger quanto pra WordPress, e para quem está começando vale a pena ver as possibilidades que o CSS nos oferece <3

1. Peronalizando todos os links do seu blog

Quando criamos um blog e fazemos uma postagem com links, normalmente esses links veem com uma personalização padrão. Para fazer com que esse padrão combine com o nosso layout, precisamos fazer mudanças no css. Para fazer isso, basta adicionar o seguinte código no seu css:

a { personalização }
a:hover { personalização } /* Quando passa o mouse em cima */

Onde está escrito personalização você deverá substituir pelo o que ensinarei mais adiante (no item 3).

2. Personalizando links específicos

Vamos supor que vocês já personalizaram todos os links do blog, mas querem que os links que aparecem na sidebar (lateral) do blog sejam diferentes do restante, como vocês fazem isso? Simples. Basta procurar a classe do css correspondente à lateral e criar uma nova com o mesmo nome e um a (e a:hover} na frente. Veja o exemplo:

#sidebar { personalização da classe sidebar }
#sidebar a { personalização dos links }
#sidebar a:hover { personalização dos links }

3. Como fazer a personalização

Agora a melhor parte, vamos aprender como deixar os links do jeitinho que a gente quer. Tudo o que estiver em vermelho, vocês devem substituir na classe dos links, onde está escrito personalização.

ADICIONANDO COR NO TEXTO
color: #000;

Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.

REMOVENDO SUBLINHADO DO LINK
text-decoration: none;

Geralmente os links são padronizados com sublinhados embaixo do texto (quando passamos o mouse em cima), esse código remove esses sublinhado, porém, vocês podem mudar o none por outra personalização que queiram.

ADICIOANDO COR DE FUNDO
background: #000

Substituam o #000 pela cor que quiserem, caso não saibam como encontrar o código das cores, cliquem aqui ou procurem no Google por cores html.

ADICIONANDO ESPAÇO ENTRE O TEXTO E A COR DO FUNDO
padding: 5px;

Esse código faz com que a cor de fundo não fique grudadinha no texto, ele meio que cria uma borda em volta do texto.

ADICIONANDO BORDA
border: 1px solid #fff;

Você usa border caso queria uma borda em todo o contorno do link. Se quiser apenas embaixo: substitua border por border-bottom, se quiser no topo: border-top, se quiser no lado direito: border-right, se quiser no lado esquerdo: border-left. O 1px é a espessura da borda, o solid é o formato da borda, ou seja, neste caso ela será uma linha; se quiser tracejado substitua por dashed ou por dotted caso queira pontilhado. E o #fff é a cor que vocês já sabem como alterar!

Exemplo de um código final

a {color: #862d78; background: #eee; border-bottom: 1px solid #e4e4e4;}

O CSS tem muitas opções de personalização, principalmente o CSS3. Vocês podem googlar e usar o que encontrarem para personalizarem seus próprios links. Como vocês perceberam, é bem simples. Se tiverem algum exemplo que queiram saber como foi feito, deixem nos comentários que se eu souber eu ajudo! :)


É isso, gente! Bem simples, né? Espero que realmente seja útil e qualquer dúvida deixem nos comentários! Beijos e até o próximo!

Postado por Marcela Magossi

Apesar da carinha de 15, tem 20 anos, cursa Sistemas de Informação na Unicamp e pretende ser Presidente do Brasil. Expõe todos os seus sonhos no seu blog, Lances para sonhar, e compartilha aqui tudo o que ela aprende sobre html e design gráfico durante suas madrugadas regadas por café, chocolate e Coca-Cola.
04 de jan de 2016

WordPress: Tags x Categorias

Uma das grandes diferenças entre o WordPress e o Blogger são as categorias e tags. Enquanto no Blogger temos apenas as tags, no WP temos as duas coisas. Ambas são importantes e fazem toda a diferença em um blog, e nesse post eu vou explicar o porquê e como vocês podem organizar o blog de vocês usando essas duas ferramentas.

wp

O que são as Categorias e as Tags?

Categoria é o tema principal do seu post, basicamente. Sempre que seu leitor clicar em determinada categoria, todos os posts com o mesmo tema aparecerão. Usando as categorias o seu blog fica mais organizado, como se você estivesse separando por pastas todo o conteúdo do seu blog.

As tags são “subcategorias”. Elas servem para caracterizar seus posts com diferentes palavras, mas não necessariamente sendo o tema principal dele.

Como organizar as categorias e tags?

A primeira coisa que vocês têm que pensar quando vão criar um post é: sobre o que é esse post? É um filme? Uma receita? Uma resenha de livro? Depois de pensar isso, vocês têm que decidir qual será a melhor maneira de categorizar o post para vocês e seus leitores.

Por exemplo: vocês vão criar a resenha de um filme. Porém, qual a melhor forma de categorizar esse post? Vocês podem escolher colocar na categoria “Resenhas” e nas tags definir qual tipo de resenha é. Ou vocês podem criar as categorias “Filmes”, “Livros” e “Séries”. Como decidir qual o melhor? Bom, pessoalmente falando, acho que depende muito da quantidade de posts que vocês falam sobre determinado assunto. Se fazem poucas resenhas, talvez nem compense criar categorias separadas e isso pode servir de estratégia para manter o público no blog. Assim, imagina que vocês só têm dois posts de resenha de filmes; se colocam todos eles na categoria Resenhas, junto com os livros e séries, os seus leitores podem, ao buscar resenhas de filmes, se interessar por outras resenhas que aparecerem ali. Se só aparecerem dois filmes, talvez eles vejam essas resenhas e saiam do blog sem terem interesse em procurar outros assuntos.

Por outro lado, se seus blogs tiverem muitos posts de filmes, talvez seja melhor categorizar separadamente. Assim as pessoas que clicarem em “Filmes” saberão que ali elas encontrarão tudo relacionado a filmes, não necessariamente apenas resenhas.

As tags funcionam de outra forma. Vamos supor que vocês escolheram criar a categoria “Filmes”. O post de vocês é sobre o filme “Um amor pra recordar”, um filme de romance que conta a história de dois jovens que se apaixonam e sofrem por conta de uma doença. As tags do post podem ser as palavras-chave: romance, jovens, adolescente, amor. Vocês podem colocar também os nomes do atores principais, o nome do filme e coisas assim.

Qual o tamanho ideal para as tags e categorias

O tamanho (quantidade de caracteres) ideal é: o menor possível. No caso das categorias, vocês têm liberdade para criar assuntos compostos, iguais às categorias que temos aqui no CDB: “Moda & Beleza”, “Viagens & Intercâmbio”. São assuntos que são ~quase~ sinônimos, então, tudo bem estarem juntos.

No caso das tags, lembrem-se: palavras-chave. Você pode criar quantas tags você quiser, mas são palavras que servem para caracterizar seus posts e facilitar para seus leitores filtrarem seus posts. Colocar uma frase não é a melhor opção, certo? Mas vocês também têm liberdade para colocar mais de uma palavra, por exemplo, nomes de celebridades como “Marcela Magossi” (HEHEHE) ou nomes de filmes como “A Culpa é das Estrelas”.

Tenho Blogger, e agora?

No Blogger nós só temos a opção de tags. O que algumas blogueiras fazem é usar as tags como a mesma função das categorias. Se futuramente vocês forem migrar para o WP, irá tudo como tag, mas há uma ferramente no WP em que você pode mudar algumas tags para categorias (e vice-versa) automaticamente. Aí, vai de gosto, você pode decidir como usar no Blogger da forma como preferir, lembrando que quanto mais prático para seus leitores, melhor, então busque manter sempre organizado (seja como tag ou categoria).


Esse post foi uma recomendação da Aziza, no post Conheça o painel do WordPress. Se você, assim como ela, tem alguma recomendação ou pedido de post, deixe nos comentários ou dê seu pitaco ali no espaço que temos na lateral do blog! Juro que aos poucos vou elaborando os posts de acordo com os pedidos de vocês!

Um super beijo e até a próxima!

Postado por Marcela Magossi

Apesar da carinha de 15, tem 20 anos, cursa Sistemas de Informação na Unicamp e pretende ser Presidente do Brasil. Expõe todos os seus sonhos no seu blog, Lances para sonhar, e compartilha aqui tudo o que ela aprende sobre html e design gráfico durante suas madrugadas regadas por café, chocolate e Coca-Cola.
Página 1 de 9123456789