personalizando cada gadget

vamos personalizar cada gadget? tipo um colorido o outro branco, um sem fundo e por ai vai ..  Que tal fazer isso? então vamos seguir os passos abaixo:

1-  Primeiro vamos adicionar um gadget em layout no seu blog, escolha um de texto que é melhor para esse teste, escreva um pequeno texto, e depois salve (Com o titulo).

2- agora, salve e depois vá em seu html e procure pelo nome do gadget que você fez (é por ele que vamos saber o Id para poder personalizar.

3- Bom o seu vai está tipo assim, (é claro que não vai está igual pois o nome é diferente mais a ordem vai está mais ou menos assim): 

  <b:widget id='Text1' locked='false' title='Texto escolhido' type='Text'>

o importante é que esteje na ordem o type também, é o tipo de gadget (tipo texto, javascript, image ...)
agora onde esta escrito: 

<b:widget id='Text1' o que está de vermelho retirando as aspas'' é o ID do seu gadget é por ele que vamos personalizar!

copie, edite e cole esse código acima de  /* Variable definitions

#ID DO GADGET AQUI {
background: #006400; /* background do fundo do gadget */
font-size: 20px; /* numero do tamanho do titulo do gadget  só mude o numero, não apague o PX! */
font-family: Comic sans ms; /* nome da fonte */
border: 2px solid #000000; /* borda apague se não quiser */
border-radius: 10px; /* bordas arredondadas, apague se não quiser */
}
Visualize o layout e veja se esta tudo certinho, se estiver salve, se não estiver você deve ter feito algo errado. E também tem como personalizar o titulo! é só acrescentar o código abaixo, abaixo do código que você acabou de colar:

# ID DO GADGET h2 { /* titulos não retire o h2 */
background: #000000; /* fundo dos titulos */
color: #ffffff; /* cor do titulo */
border-top: 2px solid #ffbbff; /* bordas no topo, se quiser em baixo troque top por bottom */

agora você salva! e também tem como trocar o background de cor para imagem é só trocar background: #000000; por: background: url('LINK DA IMAGEM AQUI');  

bom por hoje é só!
beijos e até mais!

- QUEM FOR O PRIMEIRO A COMENTAR COM O CÓDIGO 001TUTORIAL GANHA DIVULGAÇÃO COM BANNER NO PRÓXIMO POST -

19 comentários

  1. Excelente post, quando eu tava mexendo no meu lay procurei bastante um post desse rsrs

    Beijos:*

    www.bloghelenacampos.com

    ResponderExcluir
    Respostas
    1. é mesmo, nessas horas nunca encontramos o tutodrial..
      mais agora você já sabe que aqui tem :)

      Excluir
  2. Não é muito difícil de fazer. Sempre estou mudando os meus blogs de testes. Bjus!

    galerafashion.blogspot.com.br

    ResponderExcluir
    Respostas
    1. não é tão dificil, só basta prestar atenção que você consegue! :)

      Excluir
  3. Ameii as dicas! principalmente p mim que sou iniciante
    beijoss
    http://lynnkumoruna.blogspot.com.br/

    ResponderExcluir
  4. Oii que legal! Eu não sabia fazer isso!
    Bjs, Bruna.
    http://moranguinhuemake.blogspot.com

    ResponderExcluir
  5. Adorei o post, bem útil!
    Bjs

    http://achadosdamila.blogspot.com.br/

    ResponderExcluir
  6. Obrigada pela visita.
    òtimas dicas.
    Big Beijos

    ResponderExcluir
  7. Adorei o tutorial, super útil!
    vestindo-ideias.blogspot.com.br

    ResponderExcluir
  8. Interessante! Gostei da dica! :)

    Beijo
    http://criandorabiscos.blogspot.com

    ResponderExcluir
  9. Adorei as dicas ♥.♥

    Instagram: ferdallan
    http://www.leferblog.com.br

    ResponderExcluir
  10. Gostei bastante da dica

    Beijos
    @pocketlibro
    http://pocketlibro.blogspot.com.br

    ResponderExcluir
  11. Amei as dicas, realmente pra mexer tem que entender!
    beijos!

    http://pamlepletier.blogspot.com.br/
    https://www.facebook.com/BlogForeverYourself

    ResponderExcluir
    Respostas
    1. é tem mesmo, se não dá algum erro e bota culpa no blog..

      Excluir
  12. Adorei demais o tuto, e é bem legal né ♥
    Beijos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN