fazendo Efeito nos textos e no titulo do blog

Muitas Pessoas pesquisam no Google ou em outros sites e blogs de dicas, como fazer um efeito no texto do Blogger/Blogspot, ou mesmo em outras plataformas como o Wordpress e Xpg, esta última, seria excelente se não fosse tão 'instável'. mas agora, darei um simples 'tutorial', se é que podemos chamar assim, para você fazer textos rolarem ou piscarem.


OBS:
ESSES CÓDIGOS ENSINADOS A SEGUIR, TAMBÉM FUNCIONAM COM IMAGENS E VÍDEOS


Para fazer um texto rolar, utilize o seguinte código:
<marquee>texto que vai rolar</marquee>
Veja como ficará:
texto rolando

Para fazer o texto rolar,mas no sentido contrario, utilize o código abaixo:
<marquee direction='right'>texto rola na direção direita</marquee>
Veja o Exemplo:
texto rolando
Para mudar a direção do texto utilize o código abaixo:
left=esquerda
right=direita
Up=para cima
Down=Para baixo

Exemplos de direção:

Para cima:
texto rolando
Código:
<marquee direction="right">texto rolando</marquee>

Para baixo:
texto rolando
Código:
<marquee direction="down">texto rolando</marquee>

Para esquerda:
texto rolando
Código:
<marquee direction="left">texto rolando</marquee>

Para direita:
texto rolando
Código:
<marquee direction="right">texto rolando</marquee>


Logo, para mudar a direção do texto, basta mudar o código que fica depois de direction='mudar aqui'.

Existe outro efeito bem interessante para a etiqueta 'marquee', que faz o texto rolar e parar, para adicioná-lo, utilize o código:
<marquee behavior='slide'>texto rola e pára</marquee>

Para adicionar a direção, siga a dica abaixo:
<marquee behavior='slide' direction='escolha a direção'>texto que vai rolar e parar</marquee>

Para fazer o texto Piscar, utilize o seguinte código:
<blink>texto pisca</blink>
Veja o exemplo:
texto piscando

EFEITOS AVANÇADOS



Apartir de agora, segue efeito de texto para templates.

ATENÇÃO:
Esta parte é recomendada para leitores e blogueiros experientes em customização de templates, caso você não consiga ou nunca tenha feito uma modificação em seu blog antes, siga atentamente cada explicação e se houver algum erro em seu template,Não nos Responsabilizamos.


  • Faça Login no blogger


  • Clique em layout


  • Clique em Editar html


  • Clique em Baixar modelo completo


  • Clique em expandir modelo de widgets


  • Tudo feito? Siga as instruções abaixo.


  • Fazendo o título do blog piscar na página inicial e rolar nas páginas de postagens e marcadores.

    esse efeito é bastante interessante e não vi nenhum blog de dicas ensina-lo, e já que provavelmente sou o primeiro, espero que gostem.
    Caso não goste do tutorial, você poderá desfazê-lo, clicando em arquivo, busque o template que você baixou e clique em upload e pronto.

    Para seguir com a dica, procure pelo seguinte código em seu template:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>
    <data:title/></a>
    </b:if>


    Depois que encontrar, substitua tudo pelo código abaixo:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <blink><data:title/></blink>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>
    <marquee direction='left'><data:title/>&lt/marquee></a>
    </b:if>


    Visualize o template, se não houver erros, salve.

    EFEITO DE HOVER PARA LINKS DO POST

    Ás vezes, ficamos cansados de ver tantos templates parecidos, com efeitos parecidos e etc. Muitos dos blogueiros que acessam o The Vidro, veêm que nosso layout é realmente diferente e outros me mandam e-mails dizendo que se parece um layout de site e pedem o download do template. Logo que o nosso novo template sair do 'forno', este template será disponibilizado para downloads... aguardem.


    O efeito que segue abaixo, é compatível com quase todos os navegadores, exceto o Internet Explorer ( sempre ele! ), logo, adicionamos, junto ao efeito outro para complementar, no caso do leitor usr o IE. A vantagem de utilizar o efeito é que a maioria dos Internautas utilizam o Mozilla Firefox, que é claro, é um dos melhores (olhe aqui se não for o melhor).



    Procure, Pressionando ctrl+f, o seguinte código:
    .post body


    Procure o final deste código, que geralmente termina assim '}'.

    Abaixo deste código, adicione o seguinte:
    .post a:hover{text-decoration:blink underline;}


    Visualize se não houver erros, salve.

    Até o Próximo tutorial!

    2 comentários:

    1. Olá amigo,teria como colocar este recurso de rolar para cima com os últimos posts? Com links para determinado blog/site?
      Se tiver jeito explique passo a passo pra gente.
      Abraços

      Exemplo: site feedzila

      ResponderExcluir
    2. GUSTAVO POR FAVOR GOSTARIA QUE FICASSE MAIS CLARO COMO FAZER PARA COLOCAR O EFEITO NOS TEXTO (ROLAR NA TELA).
      OS CÓDIGOS AOS QUAIS SE REFERE ONDE DEVO COLOCÁ-LOS, ANTES OU DEPOIS DO TEXTO.
      PODE SER MAIS EXPLICITO. AGUARDO.
      OBRIGADA

      ResponderExcluir

    Comentários de leitores anônimos NÃO serão publicados. Por Favor indentifique-se.
    Nenhum comentário que ofenda a integridade fisica ou moral dos autores será publicado.
    Seja objetivo em seu comentário, não use palavrões nem palavras chulas.
    Seu comentário será lido pelo Adiministrador e se aprovado, será publicado.
    OBS:
    OS COMENTÁRIOS DOS LEITORES NÃO REFLETEM A OPINIÃO DOS AUTORES DESTE BLOG, NEM PODERÁ SER USADA COMO BASE PARA QUALQUER TIPO DE ARGUMENTAÇÃO CONTRA ESTE BLOG, JÁ QUE NÃO FAZ PARTE DO CONTEÚDO INTERNO DESTE BLOG E SIM, DO CONTEÚDO INTERATIVO.
    OS COMENTÁRIOS NA REALIDADE, TRANSPARECE O PARECER DO LEITOR SOBRE DETERMINADO ASSUNTO POSTADO NESTE BLOG, CABE AO LEITOR, E SÓ A ELE, UTILIZAR PALAVRAS SIMPLES, OBJETIVAS E ESPONTÂNEAS.

    Os autores deste blog, não se responsabilizam por nenhum conteúdo publicado pelos leitores.
    Você será o único responsável por toda e qualquer palavra escrita em seu comentário.
    Então. Pense bem e Comente!