Páginas

Blog de teste // Valle Mustaqet

24/11/2012

Efeito Backy + Thank's

Quero agradecer muito a Miih, do Blog Somos Amendo Bobos, por me indicar. Obrigada Linda ♥! Nem sei como agradecer.
Hooy gente! Vim aqui mostrar para vocês como fazer um efeito bem legal, chamado Backy. Para quem não sabe qual é, ele é aquele que eu (atualmente) estou usando no gadget "recomendados" (aquele lá em cima). Cliquem aqui para ver uma preview do mesmo ok?!
P.S.: Créditos ao We♥HTML, pois o efeito é de lá.

1. Primeiramente, vá em "Editar HTML" no seu Blog, aperte CTRL+F ou F3, e procure por "]]></b:skin>"
Antes disso cole o seguinte código:
imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;}nome2 {position: absolute; display: block; width: 300px; height: 30px;top: 30px; margin-left: -20px;opacity: 0; text-align: center; color:#A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px;font-family: 'play'}imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}
Explicando o Código:
Onde está em Negrito, são as alturas e as larguras da sua imagem, e da "barra" (onde aparece as palavras, no caso do VM: o nome dos blogs indicados). Eu aconselho a você não mexer muito nisso, a não ser que tenha pelo menos um conhecimento básico de HTML. Tente fazer com imagens mais ou menos da mesma largura e altura do código principal. (ou seja: 100x100)

Onde está em Itálico, são as cores das bordas da imagem e da "barra". Veja: "imagem2" corresponde a imagem; então, dentro deles estarão os códigos das bordas da imagem. Já "nome2" corresponde a "barra", e dentro dela estarão os códigos correspondentes as bordas da mesma.

Por último, onde está em Sublinhado, corresponde a cor do fundo da "barra"

2. depois adicione um Gadget (HTML/JavaScript) e, dentro dele, cole esse código:
<a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>

Explicando o Código:
Onde está em Negrito, você colocará o Link que você deseja que as pessoas vão quando clicarem no mesmo. Onde está em Itálico, você colocará o Link da sua imagem (de 100x100). Onde está em Sublinhado, você colocará o nome que você quer que apareça na "barra", o Nome do link. E, onde está em Itálico-Sublinhado, é a altura da sua imagem; se você mexer com o "width", no primeiro códiggo, você terá que mexer com esse "width" do segundo código também.
P.S.: Você terá que repetir o código dependendo de quantas imagens você quer.
É isso gente, qualquer coisa me avisem!

3 comentários:

  1. Haha, que isso guri u.u
    E é Miih poxa :c SUHAUJSHUAHSU
    somos-amendo-bobos.blogspot.com

    ResponderExcluir
    Respostas
    1. Já vou te colocar nos afiliados,é que fiquei um tempo sem entrar na net :c

      Excluir
    2. HUASHUAS' XD Sorry' já ajeitei lá :3

      Okay~

      Excluir