Boas, hoje vou ensinar a personalizar a SideBar do nosso blog. Para quem não sabe sidebar é a barra que se encontro à esquerda ou à direita do conteúdo do blog:
Exemplo:
 |
| Esquema do Blog |
Quando nós criámos um blog, e escolhemos um template base a nossa SideBar encontra-se desta forma:
 |
| Sidebar com borda a preto |
Para personalizarmos a nossa sidebar vamos usar a classe aside ao adicionarmos código css dentro dessa classe começamos a personalizar a nossa sidebar.
aside {
}
Agora dentro dos { } é só colocar o nosso código css para personalizarmos a sidebar a nosso gosto. Bem, eu acho que devemos colocar um padding e ele não deve ser eliminado porque dá-nos uma distância para o texto não ficar encostado à borda. Então:
aside {
padding: 20px 5px 20px 5px;
}
A parte adicionada irá dar-nos uma distância entre a borda e o conteúdo, a distância dado no topo e no fim é de 20 px e nas laterais de 5px, podem alterar para se adequar melhor ao seu blog, sendo que o primeiro é a distância em relação ao topo, o segundo em relação à direita, o terceiro ao fim e o quarto à esquerda.
Feito isto podemos adicionar mais coisas, essas serão mencionadas no código abaixo:
aside {
background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */
color: wheat; /* cor do texto */
border-radius: 5px; /* Arredondamento da borda*/
font-size: 12px; /* Tamanho do texto */
padding: 20px 5px 20px 5px;
border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */
}
Feito isto temos a nossa sidebar personalizada, podemos é modificar os links adicionando isto:
aside a:link, aside a:visited {
color: wheat;
text-decoration: none;
}
aside a:hover {
color: black;
text-decoration: none;
}
aside a:link, aside a:visited - Coloca a cor do link e do link visitado wheate retira o sublinhado usando a parte text-decoration: none;
aside a:hover - Coloca a cor do link quando estiver o rato sobre ele preto e retira o sublinhado.
E finalmente para modificar o título da nossa sidebar usamos:
aside h2 {
background-color: rgba(3, 23, 31, 0.16);
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.17);
text-align: center;
}
Adicionam este código em HTML --> Modelo --> Editar HTML
Pressionam Ctrl + F e pesquisam por ]]></b:skin>
Acima disso coloquem o código que estivemos a desenvolver:
aside {
background: rgb(73,192,240); /* Cor de Fundo, pode adicionar imagem deste modo background-image: url("url_da_imagem") */
color: wheat; /* cor do texto */
border-radius: 5px; /* Arredondamento da borda*/
font-size: 12px; /* Tamanho do texto */
padding: 20px 5px 20px 5px;
border: 2px solid black; /* Adiciona uma borda de 2px totalmente preenchida, podem substituir o solid por dashed, dotted, double para efeitos diferentes, e finalmento o black é a cor da borda. Se não quiserem borda removem esta parte. */
}
aside a:link, aside a:visited {
color: wheat;
text-decoration: none;
}
aside a:hover {
color: black;
text-decoration: none;
}
aside h2 {
background-color: rgba(3, 23, 31, 0.16);
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.17);
text-align: center;
}
Irá ficar deste modo:
 |
| Sidebar personalizada |
Pronto e hoje aprenderam a personalizar a SideBar, se tiverem alguma dúvida ou não conseguirem personalizar a vossa Sidebar deixem nos comentários que eu irei ajudar. Mais um tutorial de Tuga Design Web!
0 comentários:
Enviar um comentário