Personalizando o rodapé

Como prometido, aqui está o tutorial pra vocês. Sabem esse jeito fofo e bonito que eu personalizei meu rodapé(aquela barra com os créditos e etc)? Vou ensinar vocês a fazerem como a minha. É bem fácil, só é preciso ter umpouquinho de atenção.

Ah, meus amores, um novo layout está por vir. Por enquanto, é tudo uma surpresa, mas quando o blog conquistar mais uma meta (450 seguidores), colocarei aqui.

Chega de enrolação, vamos pro tutorial?

Primeiro, tire o código do Attribution. Se você ainda tem, tecle Ctrl + F e procure por:

Depois que achar o código, apague ele completamente.

Agora procure pela tag ]]>. Acima dela, cole:

#footer-wrapper {
background: #000; /*** cor do fundo ***/
background-repeat: no-repeat;
z-index: 1000;
height: 20px;
clear: both;
font-size: 100%; /*** tamanho da fonte ***/
color: #fff; /*** cor da fonte ***/
text-align: center; /*** alinhamento da fonte ***/
padding: 5px;
}Como prometido, aqui está o tutorial pra vocês. Sabem esse jeito fofo e bonito que eu personalizei meu rodapé(aquela barra com os créditos e etc)? Vou ensinar vocês a fazerem como a minha. É bem fácil, só é preciso ter umpouquinho de atenção.

Ah, meus amores, um novo layout está por vir. Por enquanto, é tudo uma surpresa, mas quando o blog conquistar mais uma meta (450 seguidores), colocarei aqui.

Chega de enrolação, vamos pro tutorial?

Primeiro, tire o código do Attribution. Se você ainda tem, tecle Ctrl + F e procure por:

Depois que achar o código, apague ele completamente.

Agora procure pela tag ]]>. Acima dela, cole:

#footer-wrapper {
background: #000; /*** cor do fundo ***/
background-repeat: no-repeat;
z-index: 1000;
height: 20px;
clear: both;
font-size: 100%; /*** tamanho da fonte ***/
color: #fff; /*** cor da fonte ***/
text-align: center; /*** alinhamento da fonte ***/
padding: 5px;
}

Recomendo que mexa apenas na cor de fundo e na cor da fonte. Se quiser alterar o resto, é você quem sabe, mas não vai ficar muito bom.
Logo depois de colar isso, procure por e cole acima da tag:

Designer por SEUNOMEAQUI | Tecnologia do Blogger | Todos os direitos reservados © 2012

Bem simples, né? Antes, coloque em visualizar pra ver se deu tudo certo. Se ver que está tudo ok, pode salvar e pronto. Seu rodapé está personalizado! Gostaram? Comentem. Beijos. Recomendo que mexa apenas na cor de fundo e na cor da fonte. Se quiser alterar o resto, é você quem sabe, mas não vai ficar muito bom.
Logo depois de colar isso, procure por e cole acima da tag:

Designer por SEUNOMEAQUI | Tecnologia do Blogger | Todos os direitos reservados © 2012

Bem simples, né? Antes, coloque em visualizar pra ver se deu tudo certo. Se ver que está tudo ok, pode salvar e pronto. Seu rodapé está personalizado! Gostaram? Comentem. Beijos.

Personalizar Post Footer

Hey, girls and boys, hoje resolvi trazer um tutorial pra vocês que a Yaman (ai, que nome lindo) me pediu. Sabe o jeito que eu personalizei o meu post footer? Pra quem não sabe o que é, aí tem um print:

Clique para ver em tamanho maior

Então, eu coloquei esses pontinhos, não é? Essas linhas. Vou ensinar como colocar agora!
Vá em Design, Editar HTML, dê Ctrl + F e procure por ]]>

Logo depois de ter achado, cole o seguinte código ACIMA da tag procurada:

.post-footer-line-1{
border-bottom: 1px dotted #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-1{
border-bottom: 1px dotted #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-2{
border-bottom: 1px dotted #BBB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}

Depois, faça as alterações. Lembrando que você pode trocar o estilo da borda por dashed, dotted e solid. Dashed é tracejado, dotted é pontilhado e solid é a linha reta. Você também pode trocar a cor.

Muito simples, né? Gostaram? Beijos.

Fonte personalizada no título do post

Oi, meus loves. Desculpa por estar postando um dia sim e outro não, é que eu estou muito ocupada com a escola que já começou e eu preciso ir bem esse ano.

Mas hoje, eu trouxe um tutorial que algumas pessoas me pediram. Sabe essa fonte diferente que eu uso no título dos posts? Você pode procurar e procurar, mas não vai achar nas fontes que o Blogger disponibiliza. Por isso, vim ensinar vocês a fazer isso hoje. Créditos ao blog Extras For You, pois foi lá que eu aprendi a fazer isso.

Primeiro, entre nesse site. Escolha uma fonte de seu agrado. É só clicar em Quick-use depois. Veja na imagem:

Logo depois, abrirá outra página. Espere. Desça um pouco nessa página que carregou e você encontrará algo escrito assim: "3. Add this code to your website". Dentro disso, estará um código que você terá que copiar.

Cole ele acima de no seu HTML. Logo depois de ter colado o código, cole após ele , para fechar.

Primeira parte feita. Depois, dê Ctrl + F e procure por:

Abaixo, terá algumas informações sobre a fonte usada no título do post. Mas antes, vá no site da Google Web Fonts e selecione uma parte de um código pra colocar no HTML.

Copiando apenas a parte em destaque, cole no lugar da fonte que você estava usando. Por exemplo:

Onde você vai substituir, tinha o nome da fonte antiga usada no título dos posts. Depois, vai ter o nome da fonte personalizada. Visualize e veja se deu tudo certo. Se sim, salve o modelo. Se não, tente fazer o tutorial novamente. Dúvidas? Perguntem. Espero que tenham gostado. Tuto comprido hoje, hahah. Beijos!

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.