02 março 2013

Personalizar titulos dos gadgets

http://weheartit.com/entry/29565973/via/Erica_Judd
Olá! Acho que todos já perceberam a troca de layout do rosa simples para o azul lindo e maravilhoso! Esse eu peguei o modelo limpo do Blogger e bandei bala! O antigo estava dando muitos erros em não reconhecer CSS.
Eu já tentei levar um blog de tutoriais pra frente, só que desistir no começo do caminho. Fazendo este novo layout para o meu blog eu descobrir muitas coisas interessante de HTML que eu posso postar aqui. Não vai ser tão frequentes, mas espero ajudar todos vocês ♥
Começando com como personalizar titulo dos gadgets. Não sei se todos conhecem, mas para os que não sabem, vai ser uma boa ajuda!

Personalizar titulo dos gadgets
Vá em "Modelo", clique em "Editar HTML", e aperte ctrl + f e escreva /* Headings
Você vai encontrar algo parecido com isto:
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Você deve colocar o código para modificar entre as partes que esta em roxo.
Mas como eu modifico Erica?
Se você não sabe muito como modificar eu vou te dar uma base e explicar.
h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}
Explicação:
Agora você pode mudar como quiser e conseguir vários efeitos diferentes.
font: Aconselho deixar assim para mudar no "Designer do modelo", assim a fonte é padrão e não corre o risco dela não aparecer.
text-align: Aqui você muda a posição da fonte. Lembrando que right é direita, left é esqueda e center é centralizado.
color: Cor da fonte em HTML. Código aqui.
text-shadow: É a sombra da fonte, você pode mudar onde esta em "0" e conseguir varias sombras diferentes.
background-image: Se você quiser um fundo é só colocar o url da imagem ali. Mas se quiser uma cor troque por " background: #FF1493; "
border: É a borda que vai ficar em volta do titulo. Ela pode ser solid que é a borda solida, dotted que é pontilhada e dashed que é tracejada. Você também pode escolher onde a borda vai ficar:
border-top é em cima
border-bottom é em baixo.
border-left é do lado esquerdo.
border-right é do lado direito.
Se você quiser a borda a cima é só trocar "border" por "border-top", por exemplo.
Pra mudar quando passa o mouse é só acrescentar em baixo, este código:
h2:hover {
color: #FF69B4; /*cor da fonte\*
background: #0000;
}
Ficando assim:
h2 {
font: $(widget.title.font); /* Fonte deve ser modificada pelo designer do modelo\*
text-align: center; /* onde o texto vai ficar alinhado\*
color: #FF1493; /*cor da fonte\*
text-shadow: 0px 0px 3px #6a6a6a; *\Sombrado titulo/*
background-image: url (url_da_imagem_de_fundo); *\ se quiser colocar fundo\*
border: 1px solid #ff6699; /*Modifique a cor, tamanho e estilo da borda\*
margin: 1px;
padding: 2px; */ tamanho do fundo/*
}
h2:hover {
color: #FF69B4; /*cor da fonte\*
background: #0000;
}
Lembrando que você pode acrescentar varias outras coisas no efeito hover.

Falta pouco para mil seguidores. Muito obrigada ♥
Uma musiquinha meio antiga para vocês

Bezos, Erica Lima ;*

20 comentários:

  1. Ótimo tutorial flor <3 quero ver mais ein ?

    Beijinhos,
    Lia ¨
    www.limaoealecrim.blogspot.com

    ResponderExcluir
  2. Ótimo tutorial flor <3 quero ver mais ein ?

    Beijinhos,
    Lia ¨
    www.limaoealecrim.blogspot.com

    ResponderExcluir
  3. Muito bom o tutorial, ajudou muito. Muito bem explicadinho!!

    ResponderExcluir
  4. dai eu vi que meu blog ta ali no VALE A VISITA ! e quais murri, sua linda :'))))))) a falta de tempo num me deixa dedicar tanto ao blog, mas saiba que amo aqui e estou sempre passando pra dar um oi :3
    e, obg flor <3
    beeijos e fique com Deus :*
    http://phora-do-ar.blogspot.com.br/

    ResponderExcluir
  5. awn adorei o tutorial hshas realmente o teu layout ta lindo com esse azul divoooo, flor eu gostaria que voce ensinasse passo a passo se puder claro, como voce fez esse seu like box do facebook assim,. tipo essa capinha e colocou cor nele eu pesquiso e tal so que os tutorias sao muito complexos e é tipo so pra quem sabe webdesigner profissional e eu nao sei :( ensina plis :D

    inocentementeingenua.blogspot.com

    ResponderExcluir
  6. ... continuando ahshas... voce aceita afiliaçao com o meu blog? ou tem alguma regra de tantos seguidores flor?

    ResponderExcluir
  7. Fica bem legal, acho que vou fazer no meu próximo lay. Se não for encomodar, poderia ensinar a colocar esse gadget de frase do dia? Obrigada!

    ResponderExcluir
  8. esse tuto é super útil. Deixa o blog mais bonito

    Menina perdida - perfil

    ResponderExcluir
  9. gosto muito quando explicam os detalhes do código o tutorial, fica bem melhor e meio que ensina as pessoas a mexer, elas acabam pegando o jeito depois :D acho que você deveria reabrir esse blog (pIREI no seu layout), mesmo postando raramente.
    http://risosshi.blogspot.com.br/

    ResponderExcluir
  10. Eu gostei do tutorial, que ÓTIMO que você abriu uma sessão para tutoriais! Ui, novo layout rs, adorei! http://blog13thstreet.blogspot.com :)

    ResponderExcluir
  11. Você podia colocar uma imagem de como fica ^^

    Att, Line
    putmerd.blogspot.com

    ResponderExcluir
  12. Uiaa.. Otimoo o tutorial. Amei.. Minha amiga tava precisando,vo mandar pra ela ...

    Bjss

    www.dicasluh.blogspot.com

    ResponderExcluir
  13. Já vou até deixar nos favoritos e usar no próximo layout! Título dos gadgets é sempre um tortura para ser achado um tutorial bom e amei esse! Bjs
    Jéssica
    backlash7.blogspot.com

    ResponderExcluir
  14. Adorei o tutorial, é muito útil! E fica lindo! Amei <3
    Beijos,
    depoisdeveneza.blogspot.com.br

    ResponderExcluir
  15. Tava procurando esse tutorial hoje mesmo! kkkk
    Que coincidência ein. Parace bem simples, vou fazer e ver se fica melhor do que o que está agora no meu blog ^^

    Att, Line
    putmerd.blogspot.com

    ResponderExcluir
  16. Amei o tutorial *-*
    www.smallog.blogspot.com

    ResponderExcluir
  17. Não cosigo :(
    Quando pesquiso aquilo do: * Headings não encontro nada...

    ResponderExcluir
  18. não acho esse trecho q vc falou pra procurar! :( pq será?

    ResponderExcluir
  19. Ótimo tutorial, Erica! Aproveitanto que tô aqui... Quero fazer um pedido ^.^. Vc pode fazer um cabeçalho no estilo do seu, pra mim? Por favor, vou creditar. Se sim, mande o url da imagem nos comentários para que eu possa ver, ok? Tchau :)
    http://missstudent.blogspot.com

    ResponderExcluir
  20. valeu, podem visitar http://www.cantinhodenoticias.blogspot.com/

    ResponderExcluir

Muito obrigada pelo comentário leitor, ele é muito importante *---*