Tutorial: Efeito do Blogroll do Blog + Site!

Linda dms :D

Hello guys! 

∴ (웃 ◑ω◐ ❥)∴ 

Oi tudo bem? Eu não tenho a minima ideia do que postar aqui, na verdade tá bem excasso de novidades, enfim, eu queria mostrar para vocês o site inglês de BPP -barbie a princesa das pérolas- Eu espero mesmo que venha um site para o br como veio o da Butterfly, temos nesse site download, um concurso fechado, os produtos, e um about do filme, está em inglês se quiser visitar clique aqui (www) ｡◕‿◕｡ Gostaram? Eu achei bem fofo, só achei que está meio incompleto, acho que precisava de mais. 

Enfim, vamos ao assunto do post, sabe aquele blogroll que estamos usando? Então, vou ensinar vocês a faze-ló, foi paixão a primeira vista quando vi ele, não podia deixar de colocar como blogroll, bom ele e um circulo que gira e mostra alguma coisa -você coloca oque quiser, não precisa ser um blog em divulgação- quando você passa o mouse, lembrando que na hora de colocar uma imagem, coloca um avatar, temos muitos aqui no blog.Enfim, vamos ver?

Enjooy ~

 

Visualização

Vá em Modelo → Editar HTML → Dê ctrl+f e procure por ''skin'' e quando achar ]]></b:skin> cole acima o código:

/** EFEITO CIRCLE**/
.circle li {width: 80px; height: 80px; /* tamanho */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 IMAGEM'); z-index: 3;}
.imagem-2 {background-image: url('URL DA IMAGEM'); z-index: 2;}
.imagem-3 {background-image: url('URL DA IMAGEM'); z-index: 1;}
/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #FFBBFF 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: 10px; margin: 0 0px; padding: 15px 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: 0px; border-top: 1px solid rgba(255,255,255,0.5);}

Mecham somente nos códigos onde estão coloridos, eu recomendo mudar a altura e largura de acordo com o tamanho da sua imagem. Lembrando que você não colocará as imagens pelo gadget e sim pelo HTML do modelo.

Agora, salve e vá em Layout e adicione um gadget HTML/javascript e nele coloque:

 <ul class="circle">
<li><div class="efeito">
<div class="hover">
<h3>
<a href="Link do blog, ou oque quiser q">Titulo do link</a> Coloque oque quiser aq</h3>
</div>
<div class="imagem imagem-1">
</div>
</div>
</li>
<li><div class="efeito">
<div class="hover">
<h3>
<a href="Link do que quiser">Titulo do Link</a> Oq quiser</h3>
</div>
<div class="imagem imagem-2">
</div>
</div>
</li>
<li><div class="efeito">
<div class="hover">
<h3>
<a href="Link do blog">Titulo do Link</a> Oq quiser</h3>
</div>
<div class="imagem imagem-3">
</div>
</div>
</li>
</ul>

 Prontinho, bom.. Acho que dá para entender né, enfim, entenderam? Fonte via HTMLuv;