14 de mar de 2013

Tutorial - Imagem com descrição ao lado no gadget

Yoo Minna,
Faz tempo que não posto tutos neh?
Bom acho que vou passar a postar mais :3
A Oak Chan pediu para postar um tuto de como eu coloquei a imagem ao lado do texto no gadget extras.
Let's?

Este é o result:
Bom apenas adicione ao seu gadget html 
<img src="URL DA IMAGEM" class="border" align="left"/>

é na parte align que indica para qual lado a imagem ficará, então se quiser no lado direito mude para right,
Simples néh?
Este tuto aprendi no World of Tutos
Mas Nik Chan como você colocou o efeito da bordinha que muda de cor? 
Bom eu queria usar o mesmo efeito das imagens do welcome, então coloquei assim:
antes de ]]></b:skin>:

.efeitoborder{
border:1px solid #COR;
cursor: crosshair;
border-radius: 5px;
-webkit-transition-duration: .50s;
}
.efeitoborder:hover{
border:1px solid #COR HOVER;
cursor: crosshair;
border-radius: 5px;
-webkit-transition-duration: .50s;
 }
Depois adicionei a um gadget html:
<a href="URL DO SEU BLOG" title="frase"><img class="efeitoborder" src="http://static.tumblr.com/uteytnq/M6imjijgr/019.png//linkdaimagem" align="left" /a />
Efeito do Design Lovers
 Para colocar qualquer outro tipo de efeito, apenas adicione o align="left"/> no final do codigo
><

10 comentários:

-Yoo!!

Sem comentários Ofensivos.
Pedidos na ask
Elogios são sempre bem vindos
-Responderei a todo mundo...

(◕‿◕✿)  。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) (◕〝◕)


◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐