Efeito Autores

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.