domingo, 21 de abril de 2013

Personalizando H2 + Fonte Pixel na sidebar.


Estou feliz que tenham gostado no template free que fiz para vocês. Achei legal terem gostado e mais uma vez obrigada por estarem seguindo o blog. Em uma semana conseguimos 33 seguidores e estou bastante feliz com isso. Ah! E obrigada por divulgar o blog, Ana. :3
Gostaria de deixar claro, que estou livre para pedidos até terça-feira, dia de São Jorge. Minha escola é demais. E, se der, ainda posto na quarta por não ter prova de geografia neste dia. Mas enfim, quero dizer que podem 'tacar' pedidos. Vou fazê-los.

Tutorial 1: Personalizando H2.

Pediram-me para ensinar a personalizar o H2 das postagens (Título/Cabeçalho). Para quem não sabe, é essa parte que eu coloca nas postagens com, como exemplo, 'Tutorial 1: Personalizando H2'. Caso você não tenha entendido, clique aqui.

Para começar, procure por /* Headings. É nele que abriga os códigos que vamos editar e outros, como o da data das postagens. Pode ver, que baixo dessa seção, há um h2 {, correto? 
Selecione de h2 { a } e cole no lugar, esse código.
h2 {
  font-family: fonte_aqui.;
  color: #cor_do_título;
  font-size: tamanho_do_títulopx;
  border-bottom: 2px solid #cor_da_borda;
  text-transform: uppercase;
}
Edite as partes correspondentes. Clique aqui, para mudar o estilo da borda e a transformação do texto. Para conseguir fontes, basta seguir este tutorial. Ele mostra como o usar o site do próprio 'Google' de fontes.

Tutorial 2: Fonte Pixel na sidebar.

Vocês devem ter notado que uso uma fonte pixel na sidebar, em vez da normal. Usei também isso no template free. Caso queiram entender o que é, exatamente, é só dar uma olhada na sidebar ou nesse print do modelo que uso atualmente na sidebar.

Para usar, primeiramente deves procurar por .sidebar .widget {. Selecione desde .footer-inner .widget,
.sidebar .widget { até }. Apague esse código e no lugar dele, cole o abaixo.
.footer-inner .widget,
.sidebar .widget {
  font-family: "silkscreen";
font-size: 8px;
  color: $(widget.text.color);
}
Para fazer a fonte funcionar, terá que colar um código acima de ]]></b:skin>.
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

Espero que tenham entendido o tutorial. Caso aja dúvidas, é só perguntar por comentário ou pela ask. Sei que ficou meio embolado, mas é que ainda preciso me acostumar com postagens grandes.

Kissus.

14 comentários:

  1. Adorei os tutoriais. Eu adoro fontes pixeis, tento usar em todo lugar uheueh' @justlikethat

    ResponderExcluir
  2. Adorei os tutoriais, talvez eu use o 2, para fazer o layout do vencedor da minha gincana

    ResponderExcluir
  3. Eu não entendi a parte do H2, o link não funciona. Me explica mais

    ResponderExcluir
    Respostas
    1. Primeiramente, deves clicar na primeira setinha que aparece em teu HTML. Quando clicar nela, uma série de código abaixo.
      Dê CTRL+F e cole o código que pedi para procurar. Logo, faça os comandos e modifique as partes na qual falei.
      - Pronto!
      Qualquer dúvida, avise-me.

      Excluir
  4. Aaah, eu amo muito essa fonte pixel! *uu*
    Adorei o tutorial, essas fontes nunca funcionavam quando eu tentava colocar.

    Chu~♡
    mikicandy.blogspot.com

    ResponderExcluir
  5. Amei os dois tutoriais, são suuuuper úteis!
    A fonte pixel é tão fofinha, fica linda em menus! Só não esperava que ficasse tão amor nos títulos da sidebar! *u*

    Beijinhos, Bunny. ♥

    Bunny Days [ no perfil ]

    ResponderExcluir
  6. Existe tutorial melhor?! não existe! amei, usarei com certeza, perfeito!

    Adolescente Nerd

    ResponderExcluir
  7. *--* Adorei o tuto muito util.. ><
    Vou reblogar okay? >< com os creditos claro

    ResponderExcluir