06 agosto 2012

Criando Elemento a mais no seu Html

Bom gente o nosso post de hoje também vai ser um tutorial que eu mesma descobri, com ajuda de css e minha experiencia, fiz um elemento a mais no meu html,igual a um menu cute, mais em vez de ser com links, é em texto. Pode ser usado nas páginas, como gadget, como postagem a lista é infinita Claro que você não pode é postar no Face, twitter, orkut, pois não faz parte, é só no blog mesmoBem eu lhe dei esse nome de titulo é pois ainda não sei o nome para dar a ele, (se vocês sabem o nome, por favor comente nesse post). bem gente é isso, para saber qual é o elemento e para saber como fazer ele, clique em leia mais, e viaje no Html...
                 Tumblr_m8c5e5snha1rwcep2o1_500_large
Antes de tudo, vocês tem que ver o que é, olhe esse texto abaixo e passe o mouse por cima dele para ver, é isso que nós vamos aprender a fazer..

Passe o mouse aqui por cima para ver o efeito do tutorial

já viu? então gostou? é isso que nós vamos aprender a fazer agora! é só seguir os passos abaixo, com atenção:

1- faça login no seu blog, e clique em: Modelos >> Editar Html >> Prosseguir
2- Depois clique F3 e procure por:
/* Variable Definitions
ou procure por:
]]></b:skin>
3- acima dele colo esse código:

/* Estilo deby sabe tudo ----------------------------------------------- */
#campoatençao {
display:block;
font-size: 12px; /* tamanho da fonte */
font-family: arial; /* nome da fonte */
letter-spacing: 0;
border: 1px solid #ff50ff; /*bordas no quadrado*/
text-indent: 5px;
vertical-align: middle;
line-height: 15px;
background: #ffbbff; /* cor do background*/
color: #000000; /*cor da fonte*/
padding-left: 10px;
}

#campoatençao:hover {
display:block;
vertical-align: middle;
line-height: 15px;
background: #ff50ff; /*background do fundo hover (quando passar o mouse por cima)*/ color: #000000; /*cor da fonte hover*/
padding-left: 10px;
}

 4- agora é só você personalizar esse código como quiser, apenas edite o que esta de vermelho! no código esta a descrição.
5- agora salve.
6- agora vá em postar postagem, ou o lugar onde você quer colocar o efeito, mais não se esquece, que o efeito só vai pegar se você editar o post, pagina, ou gadget em html. e cole isso sempre que você quiser usar o efeito:
<div id="campoatençao"> Escreva o que quer que fique com o efeito, escreva um texto</div>
bem gente é só isso, não se esqueça de editar a pagina em html, se não digitar em html o efeito não pega!

bem gente fiquem com deus.
comentem a vontade, diga o que achou do post!

                                                                                                                                 BEIJOS
                                                                                                                       ATÉ A PROXIMA 



28 comentários:

  1. Debora, fiquei chocada você é tão novinha e entende muito de informática. Arrasou, já peguei algumas dicas. Bjs.

    http://belissimabysheila.blogspot.com.br

    ResponderExcluir
    Respostas
    1. entendo muito disso, é tão legal mexer com essas coisas de html.. eu amoo. beijos, volte sempre!!

      Excluir
  2. Que legal que fica !
    Gostei

    http://semcontrole.net.tc

    ResponderExcluir
    Respostas
    1. fica bem legal e diferente esse estilo, beijos, volte sempre!!

      Excluir
  3. Olá, parabéns pelo seu blog!
    Se você puder visite este blog:
    http://morgannascimento.blogsp...
    Obrigado pela atenção

    ResponderExcluir
  4. amei,salvo nos favoritos.
    cherryseublog.blogspot.com.br

    ResponderExcluir
  5. Muito esperta e inteligente! Parabéns!

    Beijos da Kika/Blog Acessarte

    ResponderExcluir
  6. amei o blog! e vai ter um concurso ou game lá no blog, se quiser participar fique de olho haha!
    candyces.blogspot.com

    ResponderExcluir
    Respostas
    1. ta ok, vou ficar ligadinha no seu blog. beijos e volte sempre!

      Excluir
  7. Adorei o tutorial! Vou tentar fazer :D

    Beijos
    www.deliriosdegarota.com

    ResponderExcluir
  8. Oooi flor, muito bom o tutorial, fica muito legal!
    Beijos ;*

    perfectgirl-vivi.blogspot.com

    ResponderExcluir
    Respostas
    1. fica super legal os posts, alem de deixalos com animação. beijos, volte sempre...

      Excluir
  9. Oi Deby :D
    Realmente o nome do seu blog, corresponde ao que você é!
    Sabe tudo *-*
    Adorei esse efeito, ainda nao tinha visto, e nem sei como fazer. Assim que tiver um tempinho vou testá-lo *-*
    Parabens, você é muito esperta^^
    Obrigada pela visitinha viu, otima semana pra você.
    Beijo!

    http://suellencastrodesign.blogspot.com.br/

    ResponderExcluir
  10. ain adorei!! super útil!
    bjs
    http://avidademalu.blogspot.com

    ResponderExcluir
  11. Poxis qinteressante,bem legal.N sabia q podia fazer isso,rs
    http://so-pra-teens.blogspot.com.br/

    ResponderExcluir
  12. Que legal!! adorei!!
    Bjokas

    http://aprendendoentreamigas.blogspot.com.br

    ResponderExcluir
  13. bem legal esse efeito!!vou usar qualquer dia desses (:
    bjoos
    noisconectados.blogspot.com.br

    ResponderExcluir
  14. Adorei, seu blog é muito fofo!
    Espero a sua visita, e participe dos sorteios, você vai gostar :)

    http://larissacanziani.blogspot.com.br

    ResponderExcluir
    Respostas
    1. obrigada, ta bom vou ver seu blog, e se der participo dos sorteios, beijos e volte sempre!

      Excluir
  15. Amei o post, super bem elaborado! O tutorial é muito bom. Gosto de coisas assim, haha :3

    Beijos enormes, http://momamoraes.blogspot.com ♥

    ResponderExcluir
  16. http://graciellealbani.blogspot.com.br/
    seguindo retribui flor bjs ^^
    lindo blog.

    ResponderExcluir
  17. Comentarios do tipo" SEGUIBDO RETRIBUI LINDO BLOG." NÃO SERAM RETRIBUIDOS! PENSEM BEM ANTES DE COMENTAR.

    ResponderExcluir
  18. fica muuito bom (=

    www.transbordandobeleza.blogspot.com

    ResponderExcluir

Créditos Blog Conectada| www.blogconnectada.blogspot.com - 2014 // Todos os direitos reservados // Para encomendar entre em contato.