tutorial

Efeito Autores

fevereiro 12, 2013,6 Comments


Efeito Quem escreve ou Efeito Autores. 
É aquele efeito que aparece uma barrinha mostrando o nome dos adms do blog. 
E eu tenho a preview aqui, passe o mouse por cima dessas fotos: 
NOME
NOME


Antes de tudo você vai separar as fotos em tamanhos iguais, aconselho que você use fotos do tamanho de que caiba duas fotos ao lado em sua sidebar, na minha sidebar eu monto fotos de 135 x 135 e elas ficam desse tamanho:


Bom é só você salvar um icon qualquer tem em tumblrs no google também, é um icon simples de colocar em twitter e tumblr.

Enfim, após fazer suas imagens para seus autores, entre no seu blog e clique na ala Modelo e em editar HTML, clique em Ctrl + F e procure por ]]></b:skin> e cole isso acima dessa tag. 

figure {    margin: 3px;    width: LARGURApx;    height: ALTURApx;    overflow: hidden;    position: relative;    border: 3px solid #CORDABORDA;    margin-right: 3px;    float: left;}figcaption {    font-family: verdana;    font-size: 11px;    position: absolute;    display: block;    width: 111px;    height: 20px;    left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE;    text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; line-height: 20px;    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;}figure:hover figcaption { left: 35px;bottom: 10px;}

Todos que estão de cores diferente, mais naturalmente no rosa, você troca.. A largura é o caso do tamanho do seu icon usado como eu disse depende de sidebar, se o seu icon for maior do que o meu você só precisa colocar o numero da largura e da altura do seu icon que caiba do lado do outro na sua sidebar. Caso seja do tamanho do meu é só colocar 135 aonde está LARGURA E ALTURA. 

Cor da borda: Você só precisa escolher a cor aqui (www) copiar a numeração mais o jogo da velha e colar no lugar de CORDABORDA 
Cor da fonte: A mesma coisa de a CORDABORDA
Cor da Faixa: A mesma coisa que a de cima. 

Salve e feche! 
   
Agora vai em Layout e adiciona um gadget e adiciona o HTML/JAVASCRIPT: 
Coloque o titulo tipo "Autores do blog" e na barra Conteúdo que é o maior quadro. 

<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/>
<figcaption>NOME</figcaption>
</figure></a>
Faz exatamente o que tá escrito ai. 

Seu Link: Link do autor, tipo link do twitter, do facebook ou do tumblr do ADM do blog. 
Link da foto: O link do icon que você quer que aparece. 
Largura da foto: É só colocar o tamanho da foto, no meu caso colocaria 135 mas no seu você coloca o numero que você colocou na HTML lá em cima. 
Nome: Exatamente o que diz. 

Pronto faça isso mais de uma vez se for mais de um Autor no blog. 
Depois é só salvar e visualizar você vai ver que vai estar funcionando direitinho. 
Se houver duvidas fale comigo pela ASK! 
Até mais. 


Tags: tutorialAuthor: Camila Homs

Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.

You Might Also Like

6 comentários:

  1. Fanfic Belieber13 de fevereiro de 2013 às 15:48

    Camila, eu n achei nenhum icon bonitinho 135x135 e peguei o seus 2 do Jus mesmo, tem algum problema ?

    ResponderExcluir
  2. Sun14 de fevereiro de 2013 às 11:11

    Brigadinha camilaaa!

    ResponderExcluir
  3. Larissa Moura23 de abril de 2013 às 17:16

    Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Julia Fernandes22 de agosto de 2013 às 14:27

    quando eu coloquei o link eu depois testei e não entrava no twitter! me ajuda??

    ResponderExcluir
  5. Oppaxwang3 de fevereiro de 2014 às 00:08

    Otimo tutorial, ajudou muito obg!!

    Things Paradise || http://thingsparadiseofficial.blogspot.com.br/

    ResponderExcluir

Assinar: Postar comentários (Atom)