Efeito Circle

Achei um efeito super bonitinho! Para quem quiser ver aqui esta, e ai não é uma graxinha? Quer tentar, então vamos lá!

1. Primeiro abra o seu blog, e vá ate o HTML e usando o atalho Ctrl+F procure por:

]]></b:skin> 

  2. E abaixo cole:

Códigos

/** EFEITO **/
.circle li {width: LARGURA DA IMAGEMpx; height: ALTURA DA IMAGEMpx; display: inline-block;}
.circle {padding: 0px; list-style: none; display: block; text-align: center; width: 100%;}
.efeito {width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2);}
.imagem {width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 10px rgba(255,255,255, 0.5); -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; transform-origin: 95% 40%; -webkit-transition: all 1s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.efeito:hover .imagem {box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg);}
/** IMAGENS **/
.imagem-1 {background-image: url('URL DA IMAGEM1'); z-index: 3;}
.imagem-2 {background-image: url('URL DA IMAGEM2'); z-index: 2;}
.imagem-3 {background-image: url('URL DA IMAGEM3'); z-index: 1;}
/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #61a0f2 url('http://static.tumblr.com/ubiuxyg/5G4m9bgwy/noise.png'); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);}
.hover h3 {color: #fff; text-transform: uppercase; position: relative; letter-spacing: 1px; font-size: 12px; margin: 0 0px; padding: 30px 0 0 0; height: 40px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}
.hover p {color: #fff; padding: 0px 5px; margin: -20px 10px; font-size: 10px; border-top: 1px solid rgba(255,255,255,0.5);}

3. Arrume o codigo como se pede, modifique a cor se quiser, aconselho as imagens o mesmo px de largura e altura ex: 100x100 em #61a0f2 e acor do fundo. Agora vamos ao layout e  lá abra um Gadget de HTML/JavaScript  e cole:

Códigos

<ul class="circle"> <li><div class="efeito"><div class="hover"> <h3>Nome1</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-1"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Nome2</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-2"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Nome3</h3><p>urldoseutumblroublog</p></div> <div class="imagem imagem-3"></div></div></li> </ul>