12 fevereiro 2014

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 ~

 




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;

16 comentários:

  1. Eu queria saber como fazia esse efeito, só não sabia o nome, ajudou muito Kellen +.+
    Bom, estou no celular, então ñ vai dar p visitar o site +0
    Beijos Pink #.#

    ResponderExcluir
    Respostas
    1. Awn, que bom que ajudei :D
      Quando for pro PC, visita, é bem legal :3

      3bjux

      Excluir
  2. Awn, a Rapunzel :3
    Que bom que já chegou o site em inglês, eu achava que nem iria ter. Vai ter um site brasileiro sim, sempre tem! Também achei que há poucas coisas no site :/
    Adoro esse efeito, fica muito lindo *u*

    barbie-prettysweet.blogspot.com

    ResponderExcluir
    Respostas
    1. Linda não?
      Eu também, demorou bastante para aparecer o site >3< Espero que tenha mesmo, e principalmente jogos (gamer aq q)
      Fica lindo mesmo u3u

      3bjux

      Excluir
  3. Sempre quis saber qual era esse efeito que você usava, rsrs. Acho que vou usa-lo no gadget da equipe!
    Beijos <3

    P.S.: Não consegui abrir os banners que você me passou pelo BeCia :((

    ResponderExcluir
    Respostas
    1. Usa mesmo u3u
      Conseguiu não? Ué, você quer q eu passe outro link?

      3bjux

      Excluir
    2. Como você mandou uma mensagem para o especial do BeCia, vim avisa-la de que ela já foi postado! Confira: http://bonecaseciabyluiza.blogspot.com.br/2014/02/3mesesdebecia-especial-raspadinha.html
      Abraços *--*

      Excluir
  4. Que foda >u< Salvei nos favoritos, vou usar no próximo layout hehe
    Ótimo tutorial *3*

    Go to Minus (^ _ ^)/~~サヨナラ

    ResponderExcluir
  5. Que site fofo *0* EU NÃO TINHA VISTO O LAY DAQUI, TO VOMITANDO ARCO ÍRIS COM ESSA FOFURA, ME DA ESSE CABEÇALHO PQ EU TO ARMADA o/"" < esse "" é uma arma q

    Que efeito perfeito *3* Faz tempo que não vejo efeitos criativos ç.ç Sambou ft. divou q

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. AIIIIIIN, tri obrigada sá linda..
      OOoOps morri ~ AHSAUHSHUAHUS'

      É lindo msm, u3u sambei? :DD Obg e3e

      3bjux

      Excluir
  6. Esse efeito é muito fofo mesmo <3! Ótimo tutorial flor.
    Kisses :*
    blogandoseussunto.blogspot.com

    ResponderExcluir

Yoo ~ Humano você parou nesse mundo por que cometa? A sim o cometa pink. Aqui nesse mundo estamos cheias de coisas legais, mais você se quiser conversar com a gente escreva aqui alguma coisa, sempre responderemos com carinho, mais tem algumas regras que são necessárias segui-las:
- Nunca nunquinha fale palavrões aqui, excluímos e caso tiver algum blog, nosso sistema te denunciará por, falta de respeito.
- Expresse sua opinião, mais caso chegar a agredir, alguém ou o blog com xingamentos por exemplo ''\Sem criatividade'' ''Você plágia'' e etc.. Excluiremos, pois não precisamos desse tipo de ''opiniões''.
- O famoso ''Estou seguindo retribui?'' Bem se eu gostar eu sigo, mais se você comentar assim ''Segui o meu blog que eu sigo o seu!'' Not, not, precisa seguir o blog para dizer isso..
- Se for encomendar alguma coisa visite mundomágicode*encomendas.tk e encomende com o nome ''Kellen''
- Se mais alguma dúvida pergunta aqui embaixo.. Besos'