Efeito nos afiliados!


Até que enfim chegou sexta! Eu estava me matando para poder parar com essa minha ansiedade da sexta-feira, afinal, é o dia que "começa a minha folga" e que eu posto aqui! Bem, acho que segunda vou trazer uma resenha para vocês, mas nada confirmado, eu vou deixar o post programado, mas vou fazer ele no domingo.  Eu queria saber se vocês visitam meu blog, se sim, devem ter ficado ipnotizados com o HTML do meu blog, mas sinceramente (até minha mamãe disse isso), o cabeçalho está muito feio. Eu coloquei uma elite de blogs irmãos bem diferente da que eu costumo colocar. Ela é assim:

Normal:

No efeito Transição:

Já com efeito:

Bom gente, o tutorial em aprendi no blog do Alan, que é um dos afiliados aqui do Dreamers for Princess. Mas vamos logo:
1. Procure pela tag ]]></b:skin> 
2. Acima dessa tag, você deve colar o seguinte código:
imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;}nome2 {position: absolute; display: block; width: 300px; height: 30px;top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px; font-family: 'play'}imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}
O que é para mudar eu destaquei em negrito, itálico e sublinhado. Em negrito, é a cor da borda que fica em volta da imagem. Em itálico é a cor da borda de cima do escrito, em sublinhado é a cor da borda de baixo. em riscado é a cor do fundo, dica: nessa parte, deixe a cor do fundo da sua barra lateral, eu deixei branco, pois na maioria das vezes, a barra lateral é branca. Agora vamos aplicar.

3. Vá no seu layout.
4. Adicione um novo gadget de HTML, e acima cole:
<a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>
Está tudo bem explicado, mas para quem é iniciante, vou mostrar como mexer. Em negrito é o link do blog (ou página, tanto faz), em itálico, é a URL da imagem  e em sublinhado é o Nome do link (no caso da minha imagem, é a sigla do blog irmão). Espero que tenham gostado! 

Beijos ^^
Lála

16 comentários:

  1. Acho super lindo esse efeito, eu uso *--*
    nuvensdeframboesa.blogspot.com

    ResponderExcluir
  2. Oii, tem selinho pra você.
    Beijos.
    oblogdablogueira.blogspot.com.br

    ResponderExcluir
  3. Acho esse efeito tão fofo *-*
    Bjôs - A Little Wolf

    ResponderExcluir
  4. Eu não sabia como se fazia este efeito, já tinha visto em alguns blogs e acho muito criativo <3

    Até mais!

    ResponderExcluir
  5. Otimo tutorial, um dia desses eu paro para testar *-*

    Beijoos.. Visite o blog, se poder participa do sorteio que ta rolando por la..

    maniaafeminina.blogs...*

    ResponderExcluir
  6. Muito lindo vou usar!
    nuvensdeframboesa.blogspot.com

    ResponderExcluir
  7. Nossa adorei! Obrigada pelo tuto <3

    http://insane-pumpkin.blogspot.com.br/

    ResponderExcluir

Otakus e otomes, façam o favor de comentar e deixar sua marquinha aqui :) aceitamos críticas construtivas qualquer dúvida entre em contato pelo meu e-mail amandadnh@gmail.com por favor não xingue qualquer leitor ou administrador do blog. "Seguindo, retribui?" Aceito mas só sigo os blogs que eu gostar.