Tutorial: Efeito Line

Aye

  Vou postar agora o efeito Line. Poderão ver no exemplo AQUI.
Ele também tem um efeito que gira para o lado quando se passa o mouse.

Vá em editar HTML e procure por ]]></b:skin> e acima cole um dos efeitos a baixo : 

EFEITO LINE

.line{
float: left;
width: 60px;
height: 46px;
margin-right: 12px;
margin-top: 15px;
background-color: #ccc;
-webkit-transform:  scale(1.100);
color: #DCDCDC;
border: 2px solid #DCDCDC;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.line:hover{
background-color: #ccc;
-webkit-transform:  scale(1.100);
color: #DCDCDC;
border: 3px solid #DCDCDC;
line-height: 10px;
box-shadow: rgba(0,0,0,.5) 0 2px 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg); transition-duration: 60s;
-webkit-transition-duration: .60s;}

Troque onde está destacado de roxo 

Visualize e se estiver tudo certo salve.

Em  gadget de HTML/JavaScript, cole:

EFEITO LINE

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="line"/></a>

Agora é só substituir onde está de roxo e pronto.