Hover dos links em negrito

Primeiramente, feliz dia das mães! Essas pessoas que fazem grande parte da nossa vida! Bom, já viram que ohover dos links aqui do blog ficam em negrito? Eu acho bem fofo e é uma forma de destacar os links. Pra quem não sabe o que é hover, é o efeito que dá quando você coloca o mouse em cima. Foi a Paloma que pediu esse tutorial. Ah, e tem uma novidade! A Brenna me pediu pra fazer um layout free. Eu vou tentar fazer, mas nada está certo ainda, ok? Se ficar bom, eu posto pra vocês! Enfim, vamos pro tutorial agora?

Primeiro, salve uma cópia do seu template. Vá no seu HTML e procure por: a:hover {

Você vai achar várias partes assim. Mas vamos usar a primeira, certo? Ela vai estar desse jeito:

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Primeiro, você muda o text-decoration:underline; para text-decoration:none;. Porque com underline, seus links vão ficar com aquele sublinhado feio em baixo, e com none, vai ficar sem nada. A color, que seria a cor do hover, você pode mudar no designer do modelo ou no próprio HTML. É só colocar, por exemplo, color: #000000;.
Depois te ter feito as alterações, vamos colocar o negrito. Antes de fechar a chave }, abaixo do color, você coloca em baixo: font-weight: bold;
Ficando desse jeito:

a:hover {
text-decoration:none;
color: $(link.hover.color);
font-weight: bold;
}

Prontinho! É só salvar e ver se deu tudo certo. Caso alguma coisa dê errado, me falem! Espero que tenham gostado. Beijos.

Data da postagem personalizada

Salve, e em seguida vá até o seu HTML (Design >> Editar HTML) e procure pelo código abaixo:

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

E substitua esse código pelo debaixo:

.main-inner h2.date-header {

font: georgia;

color: #333;

margin-right: -100px;

background: #FFB6C1;

float: right;

font-size: 11px;

padding: 4px;

}

.main-inner h2.date-header:hover {

background: #DB7093;

}

Primeiramente vamos alinhar a data. Se seu quadro de postagem está à direita não é necessário mudar o "float: right;" e o "margin-right: -100px;" caso contrário, substitua o right por left. Agora vamos entender os códigos!

font: georgia; É a fonte da data.

color: #333; É a cor da data.

margin-right: -100px; Este código é a margem externa da data, ou seja, ela ira dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto fica, quanto maior mais longe.

background: #FFB6C1; Cor do fundo do quadro.

float: right; Alinhamento do quadro da data.

font-size: 11px; Tamanho da fonte da data.

padding: 4px; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.

PROPRIEDADE HOVER

background: #DB7093; Cor do fundo do quadro quando passa o mouse em cima.