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
